javascript運動框架用法實例分析(實現(xiàn)放大與縮小效果)
更新時間:2016年01月08日 11:56:18 作者:lostyu
這篇文章主要介紹了javascript運動框架用法,結合實例形式分析了javascript運動框架的實現(xiàn)與使用技巧,可實現(xiàn)div塊的放大與縮小功能,需要的朋友可以參考下
本文實例講述了javascript運動框架用法。分享給大家供大家參考,具體如下:
該運動框架可以實現(xiàn)多物體任意值運動
運行效果截圖如下:
例子:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>運動框架</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, {width:200, height:200, opacity:100}, function(){ startMove(oDiv, {width:100, height:100, opacity:30}); }); }; }; function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ iCur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur != json[attr]){ bStop = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fn){ fn(); } } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="運動"/> <div id="div1"></div> </body> </html>
更多關于JavaScript運動效果相關內(nèi)容可查看本站專題:《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實現(xiàn)控制圖片顯示大小的方法,即實現(xiàn)圖片等比例縮放功能,涉及JS動態(tài)操作頁面元素屬性相關技巧,需要的朋友可以參考下2017-02-02TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡單來說就是通過&符號將多個類型進行合并成一個類型,然后用type來聲明新生成的類型,聯(lián)合類型和交叉類型比較相似,聯(lián)合類型通過|符號連接多個類型從而生成新的類型,本文就這兩個類型結合示例代碼詳細講解,感興趣的朋友跟隨小編一起學習吧2022-12-12