首页 > 语言 > JavaScript > 正文

jQuery插件windowScroll实现单屏滚动特效

2024-05-06 16:23:06
字体：大 中 小
来源：转载
供稿：网友

本文给大家分享的是一个使用jQuery插件windowScroll实现的单屏滚动的特效，主要参考搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，非常的实用。

回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。

参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。

代码如下:

HTML

 

 
  1. <!doctype html> 
  2. <html> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <meta content="" name="keywords" /> 
  5. <meta content="" name="description" /> 
  6. <meta name="author" content="codetker" /> 
  7. <head> 
  8. <title>window对象滚动插件</title> 
  9. <link href="style/reset.css" rel="stylesheet" type="text/css"> 
  10. <link href="style/style.css" rel="stylesheet" type="text/css"> 
  11. <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
  12. <script type="text/javascript" src="js/jquery.codetker.windowScroll.js"></script> 
  13. </head> 
  14.  
  15. <body scroll="no"> 
  16. <div class="wrap" style="dispaly:block;"> 
  17. <div class="stageControl"> 
  18. <ul> 
  19. <li>stage1</li> 
  20. <li>stage2</li> 
  21. <li>stage3</li> 
  22. <li>stage4</li> 
  23. <li>stage5</li> 
  24. </ul> 
  25. </div> 
  26. <div class="stage stage1"> 
  27. <div class="pageControl"> 
  28. <ul> 
  29. <li>page1</li> 
  30. <li>page2</li> 
  31. <li>page3</li> 
  32. </ul> 
  33. </div> 
  34. <div class="page page1"></div> 
  35. <div class="page page2"></div> 
  36. <div class="page page3"></div>  
  37. </div> 
  38. <div class="stage stage2"></div> 
  39. <div class="stage stage3"></div> 
  40. <div class="stage stage4"></div> 
  41. <div class="stage stage5"></div> 
  42. </div> 
  43. <script type="text/javascript"> 
  44. $(document).ready(function(){ 
  45. $(".wrap").windowScroll({ 
  46. 'choose' : 0, 
  47. 'verticalSpeed' : 2, //控制垂直滚动速度 
  48. 'horizontalSpeed' : 1, 
  49. 'objControlUl': '.wrap .stageControl' 
  50. }); 
  51. $(".stage1").windowScroll({ 
  52. 'choose': 1, 
  53. 'verticalSpeed' : 1, 
  54. 'horizontalSpeed' : 1,//控制水平滚动速度 
  55. 'objControlUl': '.stage1 .pageControl' 
  56. }); 
  57. }); 
  58. </script> 
  59. </body> 
  60. </html> 

CSS

 

 
  1. @charset "utf-8"; 
  2. /* CSS Document */ 
  3. body{ 
  4. margin:0 0; 
  5. padding:0 0; 
  6. height:100%; 
  7. width:100%; 
  8. overflow: hidden;; 
  9. } 
  10. .wrap{ 
  11. font-family:"微软雅黑","宋体", Times, "Times New Roman", serif; 
  12. font-size:14px; 
  13. margin:0 0; 
  14. padding:0 0; 
  15. height:100%; 
  16. width:100%; 
  17. overflow:hidden; 
  18. } 
  19.  
  20. .stage,.page{ 
  21. width: 100%; 
  22. height: 100%; 
  23. } 
  24. .stage1{ 
  25. background-color:red; 
  26. } 
  27. .stage2{ 
  28. background-color:#fff; 
  29. } 
  30. .stage3{ 
  31. background-color:yellow; 
  32. } 
  33. .stage4{ 
  34. background-color:green; 
  35. } 
  36. .stage5{ 
  37. background-color:blue; 
  38. } 
  39. .page{ 
  40. float: left; 
  41. } 
  42. .page2{ 
  43. background-color: #666; 
  44. } 
  45. .page3{ 
  46. background-color: #ddd; 
  47. } 
  48. .stageControl{ 
  49. position: fixed; 
  50. } 
  51. .stageControl ul li{ 
  52. width: 100px; 
  53. height: 30px; 
  54. line-height: 30px; 
  55. text-align: center; 
  56. cursor: pointer; 
  57. } 
  58. .stageControl ul li:hover{ 
  59. color: blue; 
  60. } 
  61. .pageControl{ 
  62. position: fixed; 
  63. left: 200px; 
  64. } 
  65. .pageControl ul li{ 
  66. float: left; 
  67. width: 50px; 
  68. height: 25px; 
  69. line-height: 25px; 
  70. text-align: center; 
  71. cursor: pointer; 
  72. } 
  73. .pageControl ul li:hover{ 
  74. color: blue; 
  75. } 

JavaScript

 

 
  1. /* 
  2. * windowScroll 0.1 
  3. * window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面 
  4. * 兼容IE,FF,Chrome等常见浏览器 
  5. * 借鉴搜狗4.2版http://ie.sogou.com/features4.2.html 
  6. */ 
  7. ;(function($,window,document,undefined){ 
  8. //定义构造函数 
  9. var WindowObj=function(ele,opt){ 
  10. this.$element=ele; //最外层对象 
  11. this.defaults={ 
  12. 'choose' : 0,//默认为上下 
  13. 'verticalSpeed' : 1, 
  14. 'horizontalSpeed' : 1, 
  15. 'objControlUl': null 
  16. }, 
  17.  
  18. this.options=$.extend({},this.defaults,opt ); 
  19.  
  20. //阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数 
  21. this.stopDefaultAndBubble=function(e){ 
  22. e=e||window.event; 
  23. if (e.preventDefault) { 
  24. e.preventDefault(); 
  25. } 
  26. e.returnValue=false; 
  27.  
  28. if (e.stopPropagation) { 
  29. e.stopPropagation(); 
  30. } 
  31. e.cancelBubble=true; 
  32. } 
  33.  
  34. this.setSize=function(ele){ 
  35. $(ele).css({ 
  36. 'width':$(window).outerWidth()+'px' 
  37. }); 
  38. //自动判断元素是否存在，对undefined赋css属性无意义 
  39. $(ele).children('.stage').css({ 
  40. 'width':$(window).outerWidth()+'px', 
  41. 'height':$(window).outerHeight()+'px' 
  42. }); 
  43. $(ele).children('.page').css({ 
  44. 'width':$(window).outerWidth()+'px', 
  45. 'height':$(window).outerHeight()+'px' 
  46. }); 
  47. } 
  48. } 
  49.  
  50. //给构造函数添加方法 
  51. WindowObj.prototype={ 
  52.  
  53. //上下滚动的方法 
  54. verticalMove:function(){ 
  55. var obj=this.$element; //最外层对象 
  56. var speed=this.options.verticalSpeed; 
  57. var objControl=this.options.objControlUl;//控制按钮 
  58.  
  59. var windowHeight=$(window).height(); 
  60. var list=$(obj).children('.stage'); 
  61. var listMax=$(list).length; 
  62.  
  63. var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1; 
  64. if(is_chrome){ 
  65. //判断webkit内核，供scrollTop兼容性使用 
  66. windowobject='body'; 
  67. }else{ 
  68. //支持IE和FF 
  69. windowobject='html'; 
  70. } 
  71. var stop=0; 
  72.  
  73. //均设置为windows大小 
  74. this.setSize(obj); 
  75.  
  76. //得到当前的垂直位置 
  77. var stageIndex; 
  78. function getIndex(){ 
  79. stageIndex=Math.round($(window).scrollTop()/windowHeight); 
  80. }  
  81.  
  82. //绑定键盘上下按键事件 
  83. $(document).keydown(function(event) { 
  84. /* 绑定keycode38，即向上按钮 */ 
  85. if (event.keyCode==38) { 
  86. getIndex(); 
  87. setTimeout(function(){ 
  88. scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码 
  89. },100); 
  90. }else if (event.keyCode==40) {//绑定40，即向下按钮 
  91. getIndex(); 
  92. setTimeout(function(){ 
  93. scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码 
  94. },100); 
  95. } 
  96. }); 
  97.  
  98. //绑定滑轮功能的函数 
  99. function handle(delta){ 
  100. getIndex(); 
  101. if (delta<0) { 
  102. setTimeout(function(){ 
  103. scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码 
  104. },100); 
  105. }else{ 
  106. setTimeout(function(){ 
  107. scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码 
  108. },100); 
  109. } 
  110.  
  111. } 
  112.  
  113. //判断滑轮，解决兼容性 
  114. function wheel(event){ 
  115. var delta = 0; 
  116. if (!event) event = window.event; 
  117. if (event.wheelDelta) { 
  118. delta = event.wheelDelta;  
  119. if (window.opera) delta = -delta; 
  120. } else if (event.detail) { 
  121. delta = -event.detail; 
  122. } 
  123. if (delta) 
  124. handle(delta); //调用执行函数 
  125. } 
  126.  
  127. //注册事件 
  128. if (window.addEventListener) { 
  129. window.addEventListener('DOMMouseScroll', wheel, false); 
  130. } 
  131. window.onmousewheel = document.onmousewheel = wheel; 
  132.  
  133. //绑定鼠标滚轮事件 
  134. $(document).bind('mousedown', function(event) { 
  135. if (e.which==2) {//which=2代表鼠标滚轮,即为中键 
  136. this.stopDefaultAndBubble(e); 
  137. //bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效 
  138. setTimeout(function(){ 
  139. this.stopDefaultAndBubble(e); 
  140. },10); 
  141. } 
  142. }); 
  143.  
  144. //如果有ul li控制按钮 
  145. if (objControl!=null) { 
  146. $(objControl).delegate('li', 'click', function() { 
  147. stageIndex=$(this).index(); 
  148. setTimeout(function(){ 
  149. scrollStage(windowobject,stageIndex,0); 
  150. },100); 
  151. }); 
  152. } 
  153.  
  154. function scrollStage(obj,stIndex,dir){//如果用scrollStage=function来指定的话没有声明提前，然后就会找不到这个函数了 
  155. //obj为操作滚动的对象 
  156. //stIndex为点击调用时应该滚动到的页面页码，按键和滚轮调用时默认为1(传入0) 
  157. //dir传入滚动时的方向，0代表不滚动，1代表向上，-1代表向下 
  158. var sIndex=stIndex;//!(dir)则stageIndex为要到的页码，否则为当前页码 
  159. var windowobject=obj; 
  160. var direction=0||dir; //接收参数封装,没有传入时暂时认为为0 
  161. var target=windowHeight*sIndex; //目标页面距离文档顶部距离 
  162.  
  163. if ( !$(windowobject).is(':animated') ) {//当没有在滚动时 
  164. if(!direction){ ////响应guider,此时stageIndex为目标页面页码 
  165. if ($(window).scrollTop() > target) { //内容下移，窗口上移,上方出现弹痕 
  166. direction=-1; 
  167. $(windowobject).animate({ 
  168. "scrollTop": target +"px" 
  169. },1000*speed,function(){ 
  170. crash_bottom(1,target,20,150); //调用撞击函数,先撞顶部,target变成当前页面了 
  171. }); 
  172. }else if($(window).scrollTop() == windowHeight*sIndex){ //当前页面时 
  173. direction=0; 
  174. crash_bottom(1, target ,20,150); //模拟撞底部 
  175. }else{ 
  176. direction=1; 
  177. $(windowobject).animate({ 
  178. "scrollTop": target +"px" 
  179. },1000*speed,function(){ 
  180. crash(1,target,20,150); //调用撞击函数,先撞底部 
  181.  
  182. }); 
  183. } 
  184. }else{//响应鼠标滚轮和键盘上下，sindex为当前页面 
  185. if(direction==1){ 
  186. if(sIndex==0){ 
  187. crash(1,target,20,150); 
  188. }else{ //往上翻 
  189. sIndex-=1; 
  190. $(windowobject).animate({ 
  191. "scrollTop":windowHeight*sIndex+"px" 
  192. },1000*speed,function(){ 
  193. crash_bottom(1,windowHeight*sIndex,20,150); //调用撞击函数,往下翻内容往上，先撞顶部 
  194. } 
  195. ); 
  196. } 
  197. }else{ 
  198. if(sIndex==listMax){ 
  199. crash_bottom(1,target,20,150); 
  200. }else{ //往下翻 
  201. sIndex+=1; 
  202. $(windowobject).animate({ 
  203. "scrollTop":windowHeight*sIndex+"px" 
  204. },1000*speed,function(){ 
  205. crash(1,windowHeight*sIndex,20,150); //调用撞击函数,往上翻内容往下，先撞底部 
  206. }); 
  207.  
  208. } 
  209. } 
  210. } 
  211. } 
  212. } 
  213.  
  214. //撞击函数 
  215. function crash_bottom(direction,termin,distant,time){ 
  216. if (!stop) { 
  217. var scrollTop=$(window).scrollTop(); 
  218. if (direction==1) { 
  219. direction=0; 
  220. $(windowobject).animate({"scrollTop":"+="+distant+"px"},time,function(){ 
  221. crash_bottom(direction,termin,distant*0.6,time); 
  222. if (distant<=15||time>150) { 
  223. stop=1;//停止碰撞 
  224.  
  225. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  226. stop=0; 
  227. }); 
  228. } 
  229. }); 
  230. }else if (direction==0) { 
  231. direction=1; 
  232. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  233. crash_bottom(direction,termin,distant*0.6,time); 
  234. if (distant<=15||time>150) { 
  235. stop=1;//停止碰撞 
  236.  
  237. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  238. stop=0; 
  239. }); 
  240. } 
  241. }); 
  242. } 
  243. } 
  244. } 
  245. function crash(direction,termin,distant,time){ 
  246. if (!stop) { 
  247. var scrollTop=$(window).scrollTop(); 
  248. if (direction==1) { 
  249. direction=0; 
  250. $(windowobject).animate({"scrollTop":"-="+distant+"px"},time,function(){ 
  251. crash(direction,termin,distant*0.6,time); 
  252. if (distant<=15||time>150) { 
  253. stop=1;//停止碰撞 
  254.  
  255. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  256. stop=0; 
  257. }); 
  258. } 
  259. }); 
  260. }else if (direction==0) { 
  261. direction=1; 
  262. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  263. crash(direction,termin,distant*0.6,time); 
  264. if (distant<=15||time>150) { 
  265. stop=1;//停止碰撞 
  266.  
  267. $(windowobject).animate({"scrollTop":termin+"px"},time,function(){ 
  268. stop=0; 
  269. }); 
  270. } 
  271. }); 
  272. } 
  273. } 
  274. } 
  275.  
  276. }, 
  277. //左右滚动的方法 
  278. horizontalMove:function(){ 
  279. var obj=this.$element; //最外层对象 
  280. var speed=this.options.horizontalSpeed; 
  281. var objControl=this.options.objControlUl;//控制按钮 
  282.  
  283. var windowWidth=$(window).width(); 
  284. var list=$(obj).children('.page'); 
  285. var listMax=$(list).length; 
  286.  
  287. var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1; 
  288. if(is_chrome){ 
  289. //判断webkit内核，供scrollTop兼容性使用 
  290. windowobject='body'; 
  291. }else{ 
  292. //支持IE和FF 
  293. windowobject='html'; 
  294. } 
  295. var stop=0; 
  296.  
  297. //均设置为windows大小 
  298. this.setSize(obj); 
  299. $(obj).css({'width':windowWidth*listMax+'px'}); 
  300.  
  301. var pageIndex; //当前页面页码(负数) 
  302. function getPageIndex(){ 
  303. pageIndex=Math.round(parseInt($(obj).css("margin-left")) / windowWidth); 
  304. } 
  305.  
  306. //绑定键盘左右按键事件 
  307. $(document).keydown(function(event){ 
  308. //判断event.keyCode为39（即向右按钮） 
  309. if (event.keyCode==39) { 
  310. getPageIndex(); 
  311. scrollPage($(obj),pageIndex,-1);  
  312. } 
  313. //判断event.keyCode为37（即向左按钮 
  314. else if (event.keyCode==37) { 
  315. getPageIndex(); 
  316. scrollPage($(obj),pageIndex,1); 
  317. } 
  318. }); 
  319.  
  320. //如果有ul li控制按钮 
  321. if (objControl!=null) { 
  322. $(objControl).delegate('li', 'click', function() { 
  323. pageIndex=$(this).index(); 
  324. setTimeout(function(){ 
  325. scrollPage(obj,pageIndex,0); 
  326. },100); 
  327. }); 
  328. } 
  329.  
  330. function scrollPage(obje,pIndex,dir){ 
  331. var windowobject=obje; 
  332. var direction=0||dir; 
  333. var pageIndex=pIndex; 
  334. var dist=Math.round(parseInt($(obj).css("margin-left"))); //当前页距离左边的margin(负值) 
  335. var aim=pageIndex*windowWidth*(-1); 
  336.  
  337. if (!$(windowobject).is(":animated")) { 
  338. if(!direction){ //响应nav 
  339.  
  340. if (dist != aim) { //此时pageIndex为yearID.非负值 
  341. $(windowobject).animate({"margin-left": aim + "px"}, 
  342. 1000*speed); 
  343. }else{ 
  344. direction=0; 
  345. $(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500); 
  346. } 
  347. }else{ //响应键盘左右键 
  348. if(direction==1){ //pageIndex为负值 
  349. if(pageIndex==0){ 
  350. $(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);  
  351. }else{ 
  352. pageIndex+=1; //显示左边内容，左键 
  353. $(windowobject).animate({"margin-left":"+=" + windowWidth + "px"}, 
  354. 1000*speed); 
  355. } 
  356. }else{ 
  357. if(pageIndex== ((-1)*(listMax-1))){ 
  358. $(windowobject).animate({"margin-left":"-="+"50px"},500).animate({"margin-left":"+="+"100px"},500).animate({"margin-left":"-="+"50px"},500);  
  359. }else{ 
  360. pageIndex-=1; 
  361. $(windowobject).animate({"margin-left":"-=" + windowWidth + "px"}, 
  362. 1000*speed); 
  363. } 
  364.  
  365.  
  366. } 
  367. } 
  368. } 
  369. } 
  370.  
  371. } 
  372. } 
  373.  
  374. //在插件中使用windowObj对象的方法，0为vertical，1为horizontal 
  375. $.fn.windowScroll=function(options){ 
  376. //创建实体 
  377. var windowObj=new WindowObj(this,options); 
  378. //根据选择调用方法 
  379. if (windowObj.options.choose==0) { 
  380. return windowObj.verticalMove(); 
  381. }else if(windowObj.options.choose==1){ 
  382. return windowObj.horizontalMove(); 
  383. }else{//2之后的留扩展吧 
  384. //add some functions 
  385. } 
  386. } 
  387. })(jQuery,window,document); 

详细的代码下载见https://github.com/codetker/myWindowScroll

以上所述就是本文的全部内容了，希望大家能够喜欢。

上一篇：jQuery自动添加表单项的方法

下一篇：jQuery实现模拟marquee标签效果

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有