[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Hướng dẫn tạo nút lên đầu trang (Hướng dẫn tạo nút lên đầu trang)
Hướng dẫn tạo nút lên đầu trang
HackerDoanDate: Thứ 5, 2013/08/22, 5:12 PM | Message # 1
Tân binh cầm Rìu Chiến
Nhóm: Điều hành viên
Bài viết: 27
Huy chương: 0
Được đánh giá: 0%
Code
<!-- Top Begin -->
      <script>
var Totop = jQuery;
Totop(function(){
     Totop('html').append('<div id="totop"></div><div id="totop2"></div>')
     Totop('#totop').hover(function(){
         Totop('#totop2').fadeIn().mouseout(function(){
             Totop(this).fadeOut(200)
         })
     })
     var defaultTop=Totop(window).height()-10-140//10 vi tri canh bottom ban dau, 249 la chieu cao
     Totop(window).resize(function(){
         defaultTop=Totop(window).height()-10-140//phong tru truong hop resize trinh duyet
     })
     var ranPo=['-298px 0','-447px 0','-596px 0','-745px 0']
     Totop(window).scroll(function(){
         var $top=Totop(window).scrollTop()
         if($top>50){
             Totop('#totop').fadeIn(100)
             Totop('#totop2').css('top',defaultTop)

         }else{
             Totop('#totop,#totop2').fadeOut(100)
         }
     })
     Totop('#totop2').click(function(){
         timeranPo=window.setInterval(function(){
           Totop('#totop2').css({'background-position':ranPo[Math.floor(Math.random()*ranPo.length)],'display':'block'})
         },200)
         setTimeout(function(){
             Totop('html,body').stop().animate({scrollTop:'50px'},400,function(){
                 Totop('#totop2').stop().animate({'top':'-250px'},300,function(){
                     clearInterval(timeranPo)
                     Totop('#totop2').css('background-position','-149px 0').hide()
                 })
             })
         },800)
     })
})
</script>
<style>
     #totop,#totop2
     {
         position: fixed;right: 0;bottom: 10px;
         width: 149px;height: 140px;overflow: hidden;
         cursor: pointer;display: none;
         background: url(http://diendan.joomlaviet.vn/up.png) no-repeat 0px 0;
         z-index: 9999;
     }
     #totop2{
         background: url(http://diendan.joomlaviet.vn/up.png) no-repeat -149px 0;
     }
</style>
      <!-- Top End -->

Chèn vào thẻ các bạn nhé!
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Hướng dẫn tạo nút lên đầu trang (Hướng dẫn tạo nút lên đầu trang)
  • Page 1 of 1
  • 1
Search:

Chat ()