Xem bài viết Back To Top cực đỉnh bằng tên lửa với jQuery Sprite

Back To Top cực đỉnh bằng tên lửa với jQuery Sprite

Jul 07, 2012Jquery / Javascript
Trước khi vào bài ta cần tìm hiểu một chút nhé. Hiệu ứng này ta sẽ dùng 1 cái hình mà bên trong cái hình đó là 6 cái hình nhỏ khác nhau, ứng với các trạng thái khác nhau của từng hình. Như vậy ta phải dùng background-position để hiện thị từng hình, 6 trạng thái có background-position như sau:
Trang thái 1 có : background-position :0px 0px
Trang thái 2 có : background-position :-149px 0
Trang thái 3 có : background-position :-298px 0
Trang thái 4 có : background-position :-447px 0
Trang thái 5 có : background-position :-596px 0
Trang thái 6 có : background-position :-745px 0
back to top cuc dinh bang ten lua voi iquery sprite 001 - 2cwebvn
Chúng ta bắt tay vào làm nào, phần HTML các bạn chỉ cần để như thế này trong phần body, cho height nó cao 1 chút là được :

1. HTML

<img src="2cwebvn_logo.png" alt="logo 2Cwebvn">

Demo BackToTop với jQuery Sprite - 2Cwebvn
Trở về bài viết, xem hướng dẫn tutorial.

2. CSS

*{margin: 0;padding: 0;}

body{
    background: #FFFCF7;
    text-align: center;
    height: 4000px;
}
h1{margin-top:50px;}
h2{
	margin:10px auto 0px;
	width:600px;
}

a{color:#00f; font-size:16px;}
img{border:2px solid #ccc; padding:5px;}

#totop,#totop2{
    position: fixed;right: 0;bottom: 10px;
    width: 149px;height: 249px;overflow: hidden;
    cursor: pointer;display: none;
    background: url(up.png) no-repeat 0px 0;
    z-index: 9999;
}

#totop2{
    background: url(up.png) no-repeat -149px 0;
}

3. JQUERY

<script>

$(function(){
    $('html').append('
') $('#totop').hover(function(){ $('#totop2').fadeIn().mouseout(function(){ $(this).fadeOut(200) }) }) var defaultTop=$(window).height()-10-249//10 vị trí canh bottom ban đầu, 249 là chiều cao $(window).resize(function(){ defaultTop=$(window).height()-10-249//phòng trường hợp resize trình duyệt }) var ranPo=['-298px 0','-447px 0','-596px 0','-745px 0'] $(window).scroll(function(){ var $top=$(window).scrollTop() if($top>50){ $('#totop').fadeIn(100) $('#totop2').css('top',defaultTop) }else{ $('#totop,#totop2').fadeOut(100) } }) $('#totop2').click(function(){ timeranPo=window.setInterval(function(){ $('#totop2').css({'background-position':ranPo[Math.floor(Math.random()*ranPo.length)],'display':'block'}) },200) setTimeout(function(){ $('html,body').stop().animate({scrollTop:'50px'},400,function(){ $('#totop2').stop().animate({'top':'-250px'},300,function(){ clearInterval(timeranPo) $('#totop2').css('background-position','-149px 0').hide() }) }) },800) }) }) </script>
Và nhớ đừng quên chèn thư viện jquery.min.js vào nhé. Các bạn có thể đưa code css và code jquery trên vào file, sau đó chèn vào trang cho nó gọn cũng được.
	
<link rel="stylesheet" type="text/css" href="file-name-css.css">
	<script type="text/javascript" src="file-name-js.js"></script>

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments