Cách làm:
B1:Ta có ảnh Sprite
Ta thấy ảnh này có 6 trạng thái...thì ta chắc chẳn nghỉ đến việc là dùng background-position.
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
Với từng giá trị trên ta thu đc các vị trí hiển thị ảnh khác nhau.. cứ -149px thì ta thu đc 1 ảnh bên phải nó..số 149px biết đc là dựa vào demo gốc mới biết chính xác.. ng` làm ra ảnh Sprite họ biết.
Code CSS:
Code jQuery:
Đọc để mà k hiểu code viết gì thì để lại comment nhé... còn k quan tâm thì copy code về dùng.
Chú ý: Chèn thư viện jquery.min.js nếu chưa có.
=UPDATE=
HƯỚNG DẪN
Down:http://www.mediafire.com/download.php?hvh0vzgxfehdtc3=>> link đính kèm ở dưới là khác nhá... cái đó là demo web thôi.
svphuyen_back_to_top_jquery.zip (67.5 KB)
B1:Ta có ảnh Sprite
Ta thấy ảnh này có 6 trạng thái...thì ta chắc chẳn nghỉ đến việc là dùng background-position.
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
Với từng giá trị trên ta thu đc các vị trí hiển thị ảnh khác nhau.. cứ -149px thì ta thu đc 1 ảnh bên phải nó..số 149px biết đc là dựa vào demo gốc mới biết chính xác.. ng` làm ra ảnh Sprite họ biết.
Code CSS:
HTML:
#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;
}
HTML:
<script>
$(function(){
$('html').append('<div id="totop"></div><div id="totop2"></div>')
$('#totop').hover(function(){
$('#totop2').fadeIn().mouseout(function(){
$(this).fadeOut(200)
})
})
var defaultTop=$(window).height()-10-249//10 vi trí canh bottom ban đau, 249 là chieu cao
$(window).resize(function(){
defaultTop=$(window).height()-10-249
})
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>
Chú ý: Chèn thư viện jquery.min.js nếu chưa có.
=UPDATE=
HƯỚNG DẪN
Demo: http://svphuyen.com demo tạm thời chơi thôi.. chứ diễn đan mình k dùng..HTML:<link rel="stylesheet" type="text/css" href="backtotop/backtotop.css" /><script type="text/javascript" src="backtotop/backtotop.js"></script>
Down:http://www.mediafire.com/download.php?hvh0vzgxfehdtc3=>> link đính kèm ở dưới là khác nhá... cái đó là demo web thôi.
svphuyen_back_to_top_jquery.zip (67.5 KB)