例子:多個div,滑鼠移入變寬
單定時器,存在問題每隔div乙個定時器
/*多個div邊寬還原*/
window.onload=function()
else
},30);
};
像這樣的程式還是存在問題的,如果樣式中含有border,在取offsetwidth的時候系統會把width和border的畫素加在一起,這樣計時器每次計算下來的width值會比原先的大,在還原時回不到原來的寬度
定時器作為物體的屬性引數的傳遞:物體,目標值
例子:多個div淡入淡出
所有東西都不能共用
屬性與運動物件繫結:速度,其他屬性值(如透明度等)
有邊框的div改變寬度用currentstyle代替offset
只能讓某個值運動起來如果想讓其他值運動起來,需要修改程式
運動屬性作為引數封裝opacity(小數問題)
/*多物體任意值運動框架*/
//var alpha=30; //多物體框架所有東西都不能共用
window.onload=function();
odiv1.onmouseout=function();
//改變div2的寬度
var odiv2=document.getelementbyid('div2');
odiv2.onmouseover=function();
odiv2.onmouseout=function();
//改變div3的文字大小
var odiv3=document.getelementbyid('div3');
odiv3.onmouseover=function();
odiv3.onmouseout=function();
//改變div4的邊框粗細
var odiv4=document.getelementbyid('div4');
odiv4.onmouseover=function();
odiv4.onmouseout=function();
//改變div5的透明度
var odiv5=document.getelementbyid('div5');
odiv5.onmouseover=function();
odiv5.onmouseout=function();
};//獲取非行間樣式--(詳見深入了解深入了解j**ascript)
function getstyle(obj,name)
else
};//任意值多物體運動框架 引數(物體,改變樣式,目標值)
function startmove(obj,attr,itarget)
else
//計算速度
var speed=(itarget-cur)/6;
speed=speed>0?math.ceil(speed):math.floor(speed);
if(cur==itarget)
else
else
}},30);
};
兩邊的按鈕——淡入淡出大圖下拉——層級,高度變化
下方的li——多物體淡入淡出
下方的ui——位置計算
淡入淡出 滑鼠移動到按鈕上時按鈕會消失
——層級問題
——按鈕和遮罩都得加上事件
function getbyclass(oparent,sclass)
;odiv.onmouseout=function()
;以上就是仿flash展示的全部js**。
JS運動應用
恢復內容開始 多種物體同時運動 例子 多個div,滑鼠移入變寬 單定時器,存在問題 每個div乙個定時器 doctype html html lang en head meta charset utf 8 meta name viewport content width device width,i...
JS運動 運動基礎(緩衝運動)
1 手風琴效果 分析 2 基礎緩衝運動 接下來取整 原因 px為計算機識別的最小單位,1px無法再往下拆分。所以css如果取值200.5px,解析時計算機會自動將其改為200px 注意 這裡的數值並沒有四捨五入計算,200.9px最後依然是200px 速度不能是小數,需要取整,所以接下來進行取整 因...
js運動之緩衝運動
裡面核心就是讓他的速度與距離成為正比 距離大,速度大 距離小,速度小 距離 目標 原始 緩衝運動一定要取整 先來個例子 id div1 div type button value 緩衝運動 onclick startmove div1 style var timer null function st...