Thứ Bảy, 22 tháng 6, 2013

Cuộn thanh quảng cáo khi scroll chuột với jQuery

Thi thoảng các bạn vào một số trang web thường thấy có banner quảng cáo ở 2 bên, khi ta cuộn chuột thì banner này trượt theo nội dung của trang. Bài viết này tôi sẽ hướng dẫn các bạn cách để tạo hiệu ứng cuộn theo như vậy.


HTML
*****
<body>
    <div class="main">
        <div class="adv">
        </div><!--banner quảng cáo bên trái-->
 
        <div class="content">
        </div><!--phần nội dung trang-->
 
        <div class="adv">
        </div><!--banner quảng cáo bên phải-->
    </div>
</body>
 
 
CSS
*****
 
.main{
    width:1200px;
    margin:auto;
}
 
.adv{
    float:left;
    width:150px;
    height:250px;
    background-color:#e1e1e1;
    margin-top:20px;
}
 
.content{
    float:left;
    width:860px;
    margin-left:20px;
    margin-right:20px;
    height:3000px;
    background-color:#e1e1e1;
}
 
 Mã Jquery
********
$(window).scroll(function(){
    t = parseInt($(window).scrollTop()) + 20;
    $('.adv').stop().animate({marginTop:t},400);
})
Người đăng: vào lúc
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)