麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 語言 > 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

以上所述就是本文的全部內容了，希望大家能夠喜歡。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板： 日日鲁一鲁视频 | 在线91视频 | av免费片| 91在线观看 | av手机免费在线观看 | 91专区在线观看 | 美女视频黄视大全视频免费网址 | 九九热在线视频观看 | 欧日韩在线视频 | 香蕉黄色网| 国产免费一区二区三区 | 日本成人在线免费 | 日韩视频在线观看免费视频 | asian gaysex| 国产一区二区三区欧美 | 久久国产精品影视 | 高清在线国产 | 国产亚洲精彩视频 | 欧美伦交| 久艹在线视频 | 日韩三区视频 | 久久免费看毛片 | 久久精品亚洲精品国产欧美kt∨ | 在线看一区二区三区 | av在线1 | 午夜影视一区二区 | 国内精品久久久久久久久久久久 | 小视频免费在线观看 | 国产日韩在线观看视频 | 一级做a爱性色毛片免费1 | 国产精品视频免费在线观看 | 97黄色网| 精品一区二区久久久久 | 精品亚洲视频在线 | 久草久视频 | 羞羞答答www网站进入 | 成人短视频在线播放 | 日韩毛片一区二区三区 | 亚洲第一黄色网 | 钻石午夜影院 | 亚洲爱爱网站 |