Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[TUT] Nút lên đầu trang phức tạp

    Admin

    Nuts

    Bài viết : 79

    Tài sản : 113

    Uy tín : 1

    Tham gia : 27/12/2011

    #1

     Sat Jul 14, 2012 9:29 am

    Chèn đoạn này vào overall_footer_begin:

    Code:
    <div id="totop" style="display: block; "></div>
    <div id="totop2" style="top: 384px; display: block; "></div>
    <script type="text/javascript" src="../*.js"></script>
    <style>#totop,#totop2{
        position: fixed;right: 0;bottom: 10px;
        width: 149px;height: 249px;overflow: hidden;
        cursor: pointer;display: none;
        background: url(http://i44.servimg.com/u/f44/15/64/85/86/up10.png) no-repeat 0px 0;
        z-index: 999;
    }
    #totop2{
        background: url(http://i44.servimg.com/u/f44/15/64/85/86/up10.png) no-repeat -149px 0;
    }</style>

    Java Script: đặt vào đâu đó rồi thay đường dẫn cho "../*.js" ở trên

    Code:
    $(function(){ $('body').append('
    ') $('#totop').hover(function(){ $('#totop2').fadeIn().mouseout(function(){ $(this).fadeOut(200) }) }) var defaultTop=$(window).height()-10-249//10 Vị trí cạnh bottom ban đầu, 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'},400,function(){ clearInterval(timeranPo) $('#totop2').css('background-position','-149px 0').hide() }) }) },800) }) })