国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 語(yǔ)言 > JavaScript > 正文

javascript關(guān)于運(yùn)動(dòng)的各種問(wèn)題經(jīng)典總結(jié)

2024-05-06 16:18:50
字體：大 中 小
來(lái)源：轉(zhuǎn)載
供稿：網(wǎng)友

這篇文章主要介紹了javascript關(guān)于運(yùn)動(dòng)的各種問(wèn)題,實(shí)例總結(jié)了javascript關(guān)于滾動(dòng)的常見(jiàn)錯(cuò)誤、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例總結(jié)了javascript關(guān)于運(yùn)動(dòng)的各種問(wèn)題。分享給大家供大家參考。具體如下：

一、JS運(yùn)動(dòng)的各種問(wèn)題

問(wèn)題一：

錯(cuò)誤代碼：

 

 
  1. function startMove(){  
  2. var timer=null;  
  3. var div1=document.getElementById("div1");  
  4. if (div1.offsetLeft==300){  
  5. clearInterval(timer);  
  6. }else{  
  7. timer=setInterval(function(){  
  8. div1.style.left=div1.offsetLeft+10+"px";  
  9. },30)  
  10. }  
  11. } 

希望實(shí)現(xiàn)的功能：

打開(kāi)定時(shí)器timer，讓div1運(yùn)動(dòng)到300px，然后讓div1停下即關(guān)掉定時(shí)器。

錯(cuò)誤之處：

if語(yǔ)句錯(cuò)誤，代碼首先設(shè)置一個(gè)null定時(shí)器timer，然后如果div1的左邊距為300px，則關(guān)掉定時(shí)器timer。否則一直運(yùn)動(dòng)。但是if并不是循環(huán)語(yǔ)句，if語(yǔ)句執(zhí)行一次之后將不再執(zhí)行。所以永遠(yuǎn)不會(huì)關(guān)閉定時(shí)器。

正確代碼：

 

 
  1. var timer=null;  
  2. function startMove(){  
  3. var div1=document.getElementById("div1");  
  4. timer=setInterval(function(){  
  5. if (div1.offsetLeft==300){  
  6. clearInterval(timer);  
  7. }  
  8. div1.style.left=div1.offsetLeft+10+"px";  
  9. },30)  
  10. } 

問(wèn)題二:

錯(cuò)誤代碼：

 

 
  1. function startMove(){  
  2. var speed=1;  
  3. var timer=null;  
  4. var oDiv1=document.getElementById("div1");  
  5. clearInterval(timer);  
  6. timer=setInterval(function(){  
  7. if (oDiv1.offsetLeft>=300){  
  8. clearInterval(timer);  
  9. }else{  
  10. oDiv1.style.left=oDiv1.offsetLeft+speed+"px";  
  11. }  
  12. },30)  
  13. } 

希望實(shí)現(xiàn)的功能：

連續(xù)點(diǎn)擊開(kāi)始按鈕，div1會(huì)加速，這是因?yàn)槊慨?dāng)點(diǎn)擊按鈕一次，就會(huì)開(kāi)啟一個(gè)定時(shí)器，累積起來(lái)就會(huì)加速，所以要在開(kāi)啟定時(shí)器之前不管有沒(méi)有定時(shí)器開(kāi)啟都要先關(guān)閉一次定時(shí)器。但是添加了關(guān)閉定時(shí)器的clearInterval方法之后，依然會(huì)加速。

錯(cuò)誤之處：

將timer變量放在了startMove方法里面，相當(dāng)于每點(diǎn)擊一次按鈕，就會(huì)執(zhí)行一次startMove方法，生成了一個(gè)閉包，因此創(chuàng)建了一個(gè)局部timer，每一個(gè)閉包當(dāng)中的timer并不會(huì)共享，所以還是相當(dāng)于生成了點(diǎn)擊次數(shù)的閉包timer。

正確代碼：

 

 
  1. var timer=null;  
  2. function startMove(){  
  3. var speed=1;  
  4. var oDiv1=document.getElementById("div1");  
  5. clearInterval(timer);  
  6. timer=setInterval(function(){  
  7. if (oDiv1.offsetLeft>=300){  
  8. clearInterval(timer);  
  9. }else{  
  10. oDiv1.style.left=oDiv1.offsetLeft+speed+"px";  
  11. }  
  12. },30)  
  13. } 

實(shí)現(xiàn)分享欄進(jìn)出功能：

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style type="text/css">  
  7. #div1{  
  8. width: 150px;  
  9. height: 200px;  
  10. background: burlywood;  
  11. position: absolute;  
  12. left: -150px;  
  13. }  
  14. span{  
  15. width: 20px;  
  16. height: 60px;  
  17. position: absolute;  
  18. background: gold;  
  19. right: -20px;  
  20. top: 70px;  
  21. }  
  22. </style>  
  23. <script>  
  24. window.onload=function(){  
  25. var oDiv1=document.getElementById("div1");  
  26. oDiv1.onmouseover=function(){  
  27. move(0);  
  28. };  
  29. oDiv1.onmouseout=function(){  
  30. move(-150);  
  31. };  
  32. };  
  33. var timer=null;  
  34. function move(target){  
  35. var oDiv1=document.getElementById("div1");  
  36. var speed=0;  
  37. if (oDiv1.offsetLeft<target){  
  38. speed=10;  
  39. }else{  
  40. speed=-10;  
  41. }  
  42. clearInterval(timer);  
  43. timer=setInterval(function(){  
  44. if(oDiv1.offsetLeft==target){  
  45. clearInterval(timer);  
  46. }else{  
  47. oDiv1.style.left=oDiv1.offsetLeft+speed+"px";  
  48. }  
  49. },30);  
  50. }  
  51. </script>  
  52. </head>  
  53. <body>  
  54. <div id="div1">  
  55. <span id="span1">分享到</span>  
  56. </div>  
  57. </body>  
  58. </html> 

實(shí)現(xiàn)圖片淡入淡出功能：

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style> 
  7. #div1{  
  8. width: 200px;  
  9. height: 200px;  
  10. background: red;  
  11. position: absolute;  
  12. filter: alpha(opacity:30);  
  13. opacity: 0.3;  
  14. }  
  15. </style>  
  16. <script>  
  17. window.onload=function(){  
  18. var oDiv1=document.getElementById("div1");  
  19. oDiv1.onmouseover=function(){  
  20. move(100);  
  21. };  
  22. oDiv1.onmouseout=function(){  
  23. move(30);  
  24. };  
  25. };  
  26. var timer=null;  
  27. var alpha=30;  
  28. function move(target){  
  29. var oDiv1=document.getElementById("div1");  
  30. var speed=0;  
  31. clearInterval(timer);  
  32. if(alpha<target){  
  33. speed=10;  
  34. }else{  
  35. speed=-10;  
  36. }  
  37. timer=setInterval(function(){  
  38. if (alpha==target){  
  39. clearInterval(timer);  
  40. }else{  
  41. alpha+=speed;  
  42. oDiv1.style.filter="alpha(opacity:"+alpha+")";  
  43. oDiv1.style.opacity=alpha/100;  
  44. }  
  45. },30);  
  46. };  
  47. </script>  
  48. </head>  
  49. <body>  
  50. <div id="div1">  
  51. </div>  
  52. </body>  
  53. </html> 

注意點(diǎn)：

1.因?yàn)樵谕该鞫壬螶avaScript并沒(méi)有像左邊距(offsetLeft)這樣的屬性。所以用一個(gè)alpha變量代替。

2.JavaScript代碼中的行間透明度設(shè)置上需要考慮瀏覽器的兼容問(wèn)題，ie瀏覽器設(shè)置方法為oDiv1.style.filter="aplha(opacity:"+aplha+")";

chrome和火狐為oDiv1.style.opacity=alpha/100。

實(shí)現(xiàn)滾動(dòng)條事件：

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style type="text/css"> 
  7. #div1{  
  8. width: 100px;  
  9. height: 100px;  
  10. background: yellowgreen;  
  11. position: absolute;  
  12. bottom: 0px;  
  13. right: 0px;  
  14. }  
  15. </style>  
  16. <script>  
  17. window.onscroll=function(){  
  18. var oDiv=document.getElementById("div1");  
  19. var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  
  20. move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);  
  21. };  
  22. var timer=null;  
  23. function move(target){  
  24. var oDiv=document.getElementById("div1");  
  25. clearInterval(timer);  
  26. timer=setInterval(function(){  
  27. var speed=(target-oDiv.offsetTop)/10;  
  28. speed=speed>0?Math.ceil(speed):Math.floor(speed);  
  29. if (oDiv.offsetTop==target){  
  30. clearInterval(timer);  
  31. }else{  
  32. oDiv.style.top=oDiv.offsetTop+speed+'px';  
  33. }  
  34. },30)  
  35. };  
  36. </script>  
  37. </head>  
  38. <body style="height:2000px;">  
  39. <div id="div1"></div>  
  40. </body>  
  41. </html> 

二、JS多物體運(yùn)動(dòng)的各種問(wèn)題

問(wèn)題一：

希望實(shí)現(xiàn)的功能：三個(gè)平行div自由的平行縮放。

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style>  
  7. div{  
  8. width: 100px;  
  9. height: 50px;  
  10. background: yellow;  
  11. margin: 10px;  
  12. }  
  13. </style>  
  14. <script>  
  15. window.onload=function(){  
  16. var oDiv=document.getElementsByTagName('div');  
  17. for (var i=0;i<oDiv.length;i++){  
  18. oDiv[i].timer=null;  
  19. oDiv[i].onmouseover=function(){  
  20. move(300,this);  
  21. };  
  22. oDiv[i].onmouseout=function(){  
  23. move(100,this);  
  24. };  
  25. }  
  26. };  
  27. function move(iTarget,oDiv){  
  28. clearInterval(oDiv.timer);  
  29. oDiv.timer=setInterval(function(){  
  30. var speed=(iTarget-oDiv.offsetWidth)/5;  
  31. speed=speed>0?Math.ceil(speed):Math.floor(speed);  
  32. if (iTarget==oDiv.offsetWidth){  
  33. clearInterval(oDiv.timer);  
  34. }else{  
  35. oDiv.style.width=oDiv.offsetWidth+speed+"px";  
  36. }  
  37. },30);  
  38. }  
  39. </script>  
  40. </head>  
  41. <body>  
  42. <div id="div1"></div>  
  43. <div id="div2"></div>  
  44. <div id="div3"></div>  
  45. </body>  
  46. </html> 

注意事項(xiàng)：

多物體運(yùn)動(dòng)如果只是設(shè)置一個(gè)定時(shí)器(設(shè)置全局定時(shí)器)的話，那么三個(gè)div共用一個(gè)一個(gè)全局定時(shí)器，那么當(dāng)一個(gè)div沒(méi)有完成縮小動(dòng)作的時(shí)候另一個(gè)div開(kāi)啟定時(shí)器執(zhí)行伸展動(dòng)作，由于定時(shí)器是全局的，那么上一個(gè)div的定時(shí)器將被覆蓋即取消掉，故上一個(gè)定時(shí)器無(wú)法完全地昨晚縮小動(dòng)作，解決辦法是給每一個(gè)div設(shè)置一個(gè)屬性timer。

問(wèn)題二：

希望實(shí)現(xiàn)的功能：多圖片的淡入淡出。

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style>  
  7. div{  
  8. width: 200px;  
  9. height: 200px;  
  10. margin: 10px;  
  11. background: yellow;  
  12. float: left;  
  13. filter: alpha(opacity:30);  
  14. opacity: 0.3;  
  15. }  
  16. </style>  
  17. <script>  
  18. window.onload=function(){  
  19. var oDiv=document.getElementsByTagName('div');  
  20. for(var i=0;i<oDiv.length;i++){  
  21. oDiv[i].timer=null;  
  22. oDiv[i].alpha=30;  
  23. oDiv[i].onmouseover=function(){  
  24. move(100,this);  
  25. };  
  26. oDiv[i].onmouseout=function(){  
  27. move(30,this);  
  28. };  
  29. }  
  30. };  
  31. function move(iTarget,obj){  
  32. clearInterval(obj.timer);  
  33. obj.timer=setInterval(function(){  
  34. var speed=(iTarget-obj.alpha)/30;  
  35. speed=speed>0?Math.ceil(speed):Math.floor(speed);  
  36. if (obj.alpha==iTarget){  
  37. clearInterval(obj.timer);  
  38. }else{  
  39. obj.alpha+=speed;  
  40. obj.style.filter="alpha(opacity:"+obj.alpha+")";  
  41. obj.style.opacity=obj.alpha/100;  
  42. }  
  43. },30);  
  44. }  
  45. </script>  
  46. </head>  
  47. <body>  
  48. <div></div>  
  49. <div></div>  
  50. <div></div>  
  51. <div></div>  
  52. </body>  
  53. </html> 

希望實(shí)現(xiàn)的功能：多物體不同方向的伸縮功能。

代碼：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style>  
  7. div{  
  8. width: 100px;  
  9. height: 100px;  
  10. margin: 10px;  
  11. background: yellow;  
  12. float: left;  
  13. border: 10px solid black;  
  14. }  
  15. </style>  
  16. <script>  
  17. window.onload=function(){  
  18. var oDiv1=document.getElementById('div1');  
  19. var oDiv2=document.getElementById('div2');  
  20. oDiv1.timer=null;  
  21. oDiv2.timer=null;  
  22. oDiv1.onmouseover=function(){  
  23. move(this,400,'height');  
  24. };  
  25. oDiv1.onmouseout=function(){  
  26. move(this,100,'height');  
  27. };  
  28. oDiv2.onmouseover=function(){  
  29. move(this,400,'width');  
  30. };  
  31. oDiv2.onmouseout=function(){  
  32. move(this,100,'width');  
  33. };  
  34. };  
  35. function getStyle(obj,name){  
  36. if(obj.currentStyle){  
  37. return obj.currentStyle[name];  
  38. }else{  
  39. return getComputedStyle(obj,false)[name];  
  40. }  
  41. };  
  42. function move(obj,iTarget,name){  
  43. clearInterval(obj.timer);  
  44. obj.timer=setInterval(function(){  
  45. var cur=parseInt(getStyle(obj,name));  
  46. var speed=(iTarget-cur)/30;  
  47. speed=speed>0?Math.ceil(speed):Math.floor(speed);  
  48. if(cur==iTarget){  
  49. clearInterval(obj.timer);  
  50. }else{  
  51. obj.style[name]=cur+speed+"px";  
  52. }  
  53. },30);  
  54. };  
  55. </script>  
  56. </head>  
  57. <body>  
  58. <div id="div1"></div>  
  59. <div id="div2"></div>  
  60. </body>  
  61. </html> 

注意事項(xiàng)：

1.offsetwidth所獲得的并不只是物體的純寬度，還有物體的變寬以及外邊距。那么在obj.style.width=obj.offsetwidth-1+"px";這句中，本意是希望圖片縮小以1px的速度勻速縮小，但是如果將邊框的寬度設(shè)置為1px而非0px，那么offsetwidth的值其實(shí)是obj的width(注意：不是style.width即不是行間的width)+2，上面這句變成了obj.style.width=obj的width+2-1+“px”;圖像反而增大了。解決的辦法就是不用offsetwidth，而用obj的width。width通過(guò)getStyle方法獲得。

2.getStyle方法得到的是string。需要用parseint強(qiáng)制轉(zhuǎn)換成數(shù)字類型。

完整的運(yùn)動(dòng)框架：

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <style> 
  7. #div1{  
  8. width: 200px;  
  9. height: 200px;  
  10. margin: 20px;  
  11. background: yellow;  
  12. border: 5px solid black;  
  13. filter: alpha(opacity:30);  
  14. opacity: 0.3;  
  15. }  
  16. </style>  
  17. <script>  
  18. window.onload=function(){  
  19. var oDiv1=document.getElementById('div1');  
  20. oDiv1.timer=null;  
  21. oDiv1.onmouseover=function(){  
  22. move(this,100,'opacity');  
  23. };  
  24. oDiv1.onmouseout=function(){  
  25. move(this,30,'opacity');  
  26. };  
  27. };  
  28. function getStyle(obj,name){  
  29. if(obj.currentStyle){  
  30. return obj.currentStyle[name];  
  31. }else{  
  32. return getComputedStyle(obj,false)[name];  
  33. }  
  34. };  
  35. function move(obj,iTarget,name){  
  36. clearInterval(obj.timer);  
  37. obj.timer=setInterval(function(){  
  38. var cur=0;  
  39. if(name=='opacity'){  
  40. cur=Math.round(parseFloat(getStyle(obj,name))*100);  
  41. }else{  
  42. cur=parseInt(getStyle(obj,name));  
  43. }  
  44. var speed=(iTarget-cur)/30;  
  45. speed=speed>0?Math.ceil(speed):Math.floor(speed);  
  46. if(cur==iTarget){  
  47. clearInterval(obj.timer);  
  48. }else{  
  49. if(name=='opacity'){  
  50. obj.style.opacity=(cur+speed)/100;  
  51. obj.style.filter='alpha(opacity:'+cur+speed+')';  
  52. }else{  
  53. obj.style[name]=cur+speed+"px";  
  54. }  
  55. }  
  56. },30);  
  57. };  
  58. </script>  
  59. </head>  
  60. <body>  
  61. <div id="div1"></div>  
  62. </body>  
  63. </html> 

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表

圖片精選

主站蜘蛛池模板： 铜鼓县| 彭山县| 澎湖县| 卫辉市| 皮山县| 定边县| 文登市| 汉沽区| 武宁县| 革吉县| 临沂市| 九龙坡区| 呼图壁县| 芮城县| 定西市| 麻江县| 朝阳区| 涟水县| 漾濞| 噶尔县| 桐乡市| 涟水县| 墨玉县| 洪湖市| 大理市| 大田县| 泸水县| 固原市| 寻乌县| 南江县| 嘉义市| 吉隆县| 甘泉县| 盐池县| 海丰县| 康乐县| 任丘市| 巧家县| 伊吾县| 台东市| 贵南县|