javascript運(yùn)動(dòng)框架用法實(shí)例分析(實(shí)現(xiàn)放大與縮小效果)
本文實(shí)例講述了javascript運(yùn)動(dòng)框架用法。分享給大家供大家參考,具體如下:
該運(yùn)動(dòng)框架可以實(shí)現(xiàn)多物體任意值運(yùn)動(dòng)
運(yùn)行效果截圖如下:
例子:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>運(yùn)動(dòng)框架</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="運(yùn)動(dòng)"/> <div id="div1"></div> </body> </html>
更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題:《JavaScript運(yùn)動(dòng)效果與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動(dòng)
- JavaScript運(yùn)動(dòng)框架 多值運(yùn)動(dòng)(四)
- JavaScript運(yùn)動(dòng)框架 多物體任意值運(yùn)動(dòng)(三)
- JavaScript運(yùn)動(dòng)框架 解決防抖動(dòng)問(wèn)題、懸浮對(duì)聯(lián)(二)
- JavaScript運(yùn)動(dòng)框架 解決速度正負(fù)取整問(wèn)題(一)
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例
- Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼,讓你輕松了運(yùn)動(dòng)的原理)
- js運(yùn)動(dòng)框架_包括圖片的淡入淡出效果
- JavaScript 創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)代碼
- JavaScript運(yùn)動(dòng)框架 鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)
相關(guān)文章
js通過(guò)指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例
下面小編就為大家?guī)?lái)一篇js通過(guò)指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02js綜合應(yīng)用實(shí)例簡(jiǎn)單的表格統(tǒng)計(jì)
在做調(diào)查問(wèn)卷的過(guò)程中,遇到一個(gè)表格的統(tǒng)計(jì)問(wèn)題,一個(gè)需要用到j(luò)s方面的綜合知識(shí),感覺(jué)還不錯(cuò)所以記錄下來(lái)與大家分享,感興趣的朋友可以了解下2013-09-09微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn),開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05JS實(shí)現(xiàn)圖片預(yù)加載之無(wú)序預(yù)加載功能代碼
這篇文章主要介紹了JS實(shí)現(xiàn)圖片預(yù)加載之無(wú)序預(yù)加載功能代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡(jiǎn)單來(lái)說(shuō)就是通過(guò)&符號(hào)將多個(gè)類型進(jìn)行合并成一個(gè)類型,然后用type來(lái)聲明新生成的類型,聯(lián)合類型和交叉類型比較相似,聯(lián)合類型通過(guò)|符號(hào)連接多個(gè)類型從而生成新的類型,本文就這兩個(gè)類型結(jié)合示例代碼詳細(xì)講解,感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12