Back to Top tên lửa new code bằng jQuery

  • Thread starter Thread starter AdminAdmin is verified member.
  • Start date Start date
Admin

AdminAdmin is verified member.

Well-Known Member
Staff member
Administrator
Cách làm:
B1:Ta có ảnh Sprite
Back to Top tên lửa new code bằng jQuery

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;
}
Code jQuery:
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>
Đọ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

HTML:
<link rel="stylesheet" type="text/css" href="backtotop/backtotop.css" /><script type="text/javascript" src="backtotop/backtotop.js"></script>
Demo: http://svphuyen.com demo tạm thời chơi thôi.. chứ diễn đan mình k dùng..
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)
 
Backup= saoluu ổn k a?
File cũ thì xóa đi à
 
Mỗi lần báckup dow file đó về thì mất kiểu gì?
 
Thế ấn lên đầu wap nó phóng cái tên lửa kéo lên à :-/
 
lạc đề nhé bạn.
p/s: backup = saoluu thì không được an toàn. vì nếu forum bị local thì sẽ mất luôn data

backup saoluu xong rồi down về ví khi nó local thì nói gì tới data nhỉ.
Muốn giữ data thì leech sang host khác.
đặt pass cho folder data chmod folder là 0000.
 
Ủa mà saoluu xong download về pc luu trữ . Cái trên host có bị local drop mất thì restore cái ở pc lên có gì đâu mà sợ ?
 
backup saoluu xong rồi down về ví khi nó local thì nói gì tới data nhỉ.
Muốn giữ data thì leech sang host khác.
đặt pass cho folder data chmod folder là 0000.

Chmod 000 nó get root thì sao
 

Facebook Comments

Similar threads

tubotocdo
Replies
5
Views
1K
CanhChimViet
CanhChimViet
Admin
Replies
30
Views
5K
Tuoitreviet
T
Admin
Replies
0
Views
66K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
923
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
940
AdminAdmin is verified member.
Admin
Back
Top