js實現的div元素尺寸彈性縮放效果程式碼例項
本章節分享一段程式碼例項,它實現了div元素寬度的尺寸彈性改變效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #bt{ text-align:center; border:1px #ccc solid; padding:5px 10px; margin:0px 200px 50px 200px; } #antzone{ width:900px; height:200px; margin:0px 200px; background-color:#e8e8e8; border:1px #ccc solid; } </style> <script type="text/javascript"> var a=900;//最大距離 var b;//定時器變數 var c=-1;//下次點選運動方向 -1負向運動 1正向運動 var d=2; //反彈常量 數值越大彈性越小 取值d>1 var e=-1; //當前運動方向 var f=a; //當前位置 var g=0; //已單向運動時間 var h; //彈性體 var i=15;//運動速度 數值越大,運動越慢 function Bounce(id){ h=document.getElementById(id); //終止未完成的運動 if(b)clearInterval(b); //重置時間 g=0; c=-1*c; //下次點選運動方向改變 b=setInterval('move()',i); } function move(){ if(c==1){ if(e==-1){ if(f-(2*g-1)>0){ f=f-(2*g-1); g++; } else{ e=1; f=1; g++; g=parseInt(g/d); g=g%2==0?(g+1):g; if(g==3)clearInterval(b); } } else{ if(g>0){ g--; f=f+2*g-1; } else{ e=-1; g=0; } } h.style.width=f.toString()+"px"; } else{ if(e==1){ if(f+(2*g-1)<a){ f=f+(2*g-1); g++; } else{ e=-1; f=a; g++; g=parseInt(g/d); g=g%2==0?(g+1):g; if(g==1)clearInterval(b); } } else{ if(g>0){ g--; f=f-(2*g-1); } else{ e=1; g=0; } } h.style.width=f.toString()+"px"; } } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ Bounce('antzone'); } } </script> </head> <body> <input id="bt" type="button" value="檢視效果"/> <div id="antzone"></div> </body> </html>
上面的程式碼實現了要求,實現的原理是很簡單的,基本都是一些數學運算。
相關文章
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- flex彈性佈局實現元素垂直居中效果程式碼例項Flex
- canvas縮放div程式碼例項Canvas
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- js獲取元素的實際尺寸程式碼例項JS
- js點選div實現閃爍效果程式碼例項JS
- js動畫方式改變div尺寸程式碼例項JS動畫
- css實現的div垂直居中效果程式碼例項CSS
- 設定div元素漸隱效果程式碼例項
- canvas實現的圖片縮放程式碼例項Canvas
- canvas實現的彈力小球效果程式碼例項Canvas
- js元素的震動效果程式碼例項JS
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- CSS實現div層半透明效果程式碼例項CSS
- js檢測瀏覽器內容縮放效果程式碼例項JS瀏覽器
- js實現的元素運動程式碼例項JS
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- js點選彈出和隱藏一個div層效果程式碼例項JS
- js元素上下移動效果程式碼例項JS
- css實現div全屏水平垂直居中效果程式碼例項CSS
- js實現的垂直選項卡效果程式碼例項JS
- 根據比例縮放圖片的尺寸不變形程式碼例項
- js實現的留言本效果程式碼例項JS
- css3元素的伸縮效果程式碼例項CSSS3
- js實現刮刮樂抽獎效果程式碼例項JS
- js實現的使用鍵盤操作div位置程式碼例項JS
- react專案中實現元素的拖動和縮放例項React
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- div的淡入淡出效果程式碼例項
- css3實現div元素垂直水平居中程式碼例項CSSS3
- js模擬實現alert()函式彈出警告視窗效果程式碼例項JS函式
- angularjs實現的購物車效果程式碼例項AngularJS
- 拖動滾動條實現div跟隨效果程式碼例項
- css3實現div邊框陰影效果程式碼例項CSSS3
- javascript元素內容漸現效果程式碼例項JavaScript