当前位置:96看吧 > 实用代码 > 网页特效 > 仿极客公园jQuery回到顶部效果

仿极客公园jQuery回到顶部效果

时间:2013/08/04
作者:devework.com
来源:devework.com
查看:

极客公园回到顶部效果

jQuery网页特效是仿极客公园的回到顶部效果,之前提供过一份是直接从极客公园网站提取的源代码,这份不同,是一位网友自己编写的,没对js代码混淆。96看吧欢迎学习下载。

样式代码部分:

  1. <style>  
  2. #backtotop { background:url(rocket.png) 0px 0px no-repeatposition:fixed; bottom:0px; right:10pxwidth:149pxheight:260pxcursorpointer; }  
  3. </style> 

jQuery代码部分:

  1. <script>  
  2. var scrollTT = {  
  3.     tTSpeed         :   800, // 滚动到顶部的时间  
  4.     startFlyTime    :   1000, // 火箭起飞的时间  
  5.     restartTime     :   1200, // 重置火箭位置的时间  
  6.     flySpeed        :   50, // 火箭向上飞行的速度  
  7.     obj             :   $("#backtotop"), // 回到顶部的dom  
  8.     flyTemp         :   ''// 一个setInterval的临时变量  
  9.     /**  
  10.     *   
  11.     * 初始化 scrollTT 函数  
  12.     * 主要是像对象添加事件  
  13.     *  
  14.     */ 
  15.     init            : function( obj, tTSpeed, startFlyTime, restartTime, flySpeed ) {  
  16.         scrollTT.tTSpeed        = scrollTT.tTSpeed || tTSpeed;  
  17.         scrollTT.startFlyTIme   = scrollTT.startFlyTIme || startFlyTime;  
  18.         scrollTT.restartTime    = scrollTT.restartTime || restartTime;  
  19.         scrollTT.flySpeed       = scrollTT.flySpeed || flySpeed;  
  20.         scrollTT.obj            = scrollTT.obj || obj;  
  21.           
  22.         // 向window 绑定scroll 事件  
  23.         scrollTT.onScroll();  
  24.  
  25.           
  26.         scrollTT.obj.click(function(){  
  27.             // 关闭默认的scroll事件  
  28.             $(window).off("scroll");  
  29.             // 页面向上滚动  
  30.             $('html,body').animate({scrollTop: '0px'}, this.tTSpeed);  
  31.             // 火箭向上飞行  
  32.             scrollTT.objFly();  
  33.             // 火箭的喷气效果  
  34.             scrollTT.blow();  
  35.               
  36.         });  
  37.  
  38.         // 鼠标在火箭上的效果  
  39.         scrollTT.obj.mouseenter(function() {  
  40.             $(this).css('background-position''-149px 0px');  
  41.         });  
  42.         // 鼠标移开的效果  
  43.         scrollTT.obj.mouseleave(function() {  
  44.             $(this).css('background-position''0px 0px');  
  45.         });  
  46.           
  47.     },    
  48.     /*  
  49.     * 向window 绑定scroll 事件  
  50.     *  
  51.     */ 
  52.     onScroll : function() {  
  53.         $(window).on('scroll'function() {  
  54.             if ($(window).scrollTop()>500){  
  55.                 scrollTT.obj.fadeIn(500);  
  56.             }else{  
  57.                 scrollTT.obj.fadeOut(1500);  
  58.             }  
  59.         });  
  60.     },  
  61.     /**  
  62.     * dom对象向上飞行  
  63.     *  
  64.     */ 
  65.     objFly : function() {  
  66.         var fly = setTimeout(function(){  
  67.             scrollTT.obj.animate({top: '-500px'} ,'normal''swing');  
  68.             scrollTT.resetFly();  
  69.             clearTimeout(fly);  
  70.             clearInterval(scrollTT.flyTemp);  
  71.         }, scrollTT.startFlyTime);  
  72.     },  
  73.     /**  
  74.     * dom 对象飞行完毕回到原来的位置  
  75.     *  
  76.     */ 
  77.     resetFly : function() {  
  78.             var fly2 = setTimeout(function() {  
  79.                 scrollTT.obj.hide();  
  80.                 scrollTT.obj.css("top"'auto');  
  81.                 scrollTT.obj.css("background-position"'0px 0px');  
  82.                 scrollTT.onScroll();  
  83.                 clearTimeout(fly2);  
  84.             },scrollTT.restartTime);  
  85.         },  
  86.     /**  
  87.     * dom 对象的喷气效果  
  88.     *  
  89.     */ 
  90.     blow : function() {  
  91.         var topPosiiton = -149;  
  92.         scrollTT.flyTemp = setInterval(function() {  
  93.             topPosiiton += -149;  
  94.             if(topPosiiton < -743) {  
  95.                 topPosiiton = -149  
  96.             }  
  97.             scrollTT.obj.css('background-position', topPosiiton + 'px 0px');  
  98.         }, this.flySpeed);  
  99.     }  
  100. };  
  101. scrollTT.init();  
  102. </script> 

演示地址:jQuery回到顶部效果_有注释优化篇

演示地址:jQuery回到顶部效果_无js混淆的普通版

相关文章:极客公园网站回到顶部效果原版

上一篇:jQuery网页特效文章字体无限放大缩小
下一篇:jQuery代码特效实现饼状图效果报表
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门