JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動(dòng)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
ul,li,img{margin:0;padding:0;border:0;}
#list{height:250px;list-style-type:none;overflow:hidden;}
</style>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
})
})});}
function move(obj,arr,target,fn){
var dt=null,speed=0,ol=0;
clearInterval(dt);
dt=setInterval(function(){
ol=parseInt(obj.style[arr]);
if(ol==target){
clearInterval(dt);
if(fn) fn();
}else{
speed=(target-ol)/8;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
obj.style[arr]=ol+speed+"px";
}
},30);
}
</script>
</body>
</html>
- JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng)
- JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
- JS運(yùn)動(dòng)改變單物體透明度的方法分析
- JS實(shí)現(xiàn)物體帶緩沖的間歇運(yùn)動(dòng)效果示例
- JS多物體實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果示例
- js多個(gè)物體運(yùn)動(dòng)功能實(shí)例分析
- javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- Javascript 多物體運(yùn)動(dòng)的實(shí)現(xiàn)
- JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
- JS實(shí)現(xiàn)多物體運(yùn)動(dòng)
相關(guān)文章
bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript創(chuàng)建對(duì)象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象方式,結(jié)合實(shí)例形式總結(jié)分析了工廠模式、構(gòu)造函數(shù)模式、原型模式等各種常見的javascript對(duì)象創(chuàng)建方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12JS循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件給選中l(wèi)i添加css樣式(示例代碼)
對(duì)于一個(gè)ul中固定的li個(gè)數(shù),當(dāng)點(diǎn)擊其中一個(gè)li時(shí),改變選中l(wèi)i的顏色;同時(shí)改變對(duì)應(yīng)的另一個(gè)ul中l(wèi)i的顏色,怎么實(shí)現(xiàn)這個(gè)功能呢,下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件,給給選中l(wèi)i添加css樣式,感興趣的朋友一起看看吧2023-07-07JS.GetAllChild(element,deep,condition)使用介紹
JS.GetAllChild()獲取所有子節(jié)點(diǎn),想必大家都知道吧,具體的使用方法如下,感興趣的朋友可以參考下2013-09-09JS實(shí)現(xiàn)可自定義大小,可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)可自定義大小,可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時(shí)函數(shù)及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對(duì)搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02詳解小程序開發(fā)經(jīng)驗(yàn):多頁面數(shù)據(jù)同步
這篇文章主要介紹了小程序開發(fā)經(jīng)驗(yàn):多頁面數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05