Cấp bậc tác giả:

HTML

Hiển thị và ẩn ảnh mỗi lần di chuột ngang qua

Được viết bởi QuangIT ngày 24/09/2013 lúc 01:57 AM
Tôi có một hình ảnh động, tôi muốn hiển thị và ẩn nó mỗi khi Tôi di chuyển chuột ở các vị trí khác nhau.
  • 0
  • 9544

Hiển thị và ẩn ảnh mỗi lần di chuột ngang qua

Tôi có một hình ảnh động, tôi muốn hiển thị và ẩn nó mỗi khi Tôi di chuyển chuột ở các vị trí khác nhau.
Bài viết này sẽ hướng dẫn bạn sử dụng một số hàm trong js để thực hiện điều đó

Đoạn HTML như sau:
<div class="image-wrap" name="#">
    <a href="#">
        <img class="image" src="/images/logo.png"></a>
</div>

Còn đây là đoạn JS:
$(document).ready(function(){
    animateDiv();
    
});

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('.image').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
     $('.image').animate({ top: newq[0], left: newq[1] }, speed, function(){
         $('.image').fadeIn('slow');
        $('.image').fadeOut('slow');
      animateDiv();        
    });

    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}
Chú ý đoạn JS trên.
Còn đây là đoạn CSS bổ sung thêm HTML:
body {
   margin: 0;
   height: 100%;
}
.image-wrap {
    height: 100%;
    position: absolute;
    width: 100%;
}

.image {
    display: block;
    height: 100%;
    left: 0;
    max-height: 100px;
    max-width: 100px;
    position: fixed;
    top: 0;
    width: 100%;
}

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML