JS多物體 任意值 鏈式 緩沖運動
更新時間:2012年08月10日 17:09:57 作者:
JS多物體 任意值 鏈式 緩沖運動,需要的朋友可以參考下
復制代碼 代碼如下:
<!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>
相關文章
bootstrap監(jiān)聽滾動實現(xiàn)頭部跟隨滾動
這篇文章主要為大家詳細介紹了bootstrap監(jiān)聽滾動實現(xiàn)頭部跟隨滾動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript創(chuàng)建對象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
這篇文章主要介紹了JavaScript創(chuàng)建對象方式,結(jié)合實例形式總結(jié)分析了工廠模式、構(gòu)造函數(shù)模式、原型模式等各種常見的javascript對象創(chuàng)建方式與相關操作注意事項,需要的朋友可以參考下2018-12-12JS循環(huán)遍歷ul中l(wèi)i的點擊事件給選中l(wèi)i添加css樣式(示例代碼)
對于一個ul中固定的li個數(shù),當點擊其中一個li時,改變選中l(wèi)i的顏色;同時改變對應的另一個ul中l(wèi)i的顏色,怎么實現(xiàn)這個功能呢,下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點擊事件,給給選中l(wèi)i添加css樣式,感興趣的朋友一起看看吧2023-07-07JS.GetAllChild(element,deep,condition)使用介紹
JS.GetAllChild()獲取所有子節(jié)點,想必大家都知道吧,具體的使用方法如下,感興趣的朋友可以參考下2013-09-09詳解小程序開發(fā)經(jīng)驗:多頁面數(shù)據(jù)同步
這篇文章主要介紹了小程序開發(fā)經(jīng)驗:多頁面數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05