在div上加上邊框,border:1px solid black
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
setInterval(function(){
#.style.widdivth = 1.W },30)
}
}
//currentStyle:目前的樣式
if(obj.currentStyle){
火狐
}else{
//getComputedStyle:計算後的樣式
return getComputedStyle(obj,false) name }
下一步我們就需要把move函數進化一下,
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';}else{
obj.style[name] = cur +'px';
}
上述的程式碼只能從一個方向移動,但是呢我想先往下走500,然後往左走100,這樣要怎麼做呢?
var oDiv = document.getElementById('div1');
var timer;function getStyle( obj,name){
//currentStyle:目前的樣式
if(obj.currentStyle){
return obj.currentStyle[name];//不相容於Google和火狐
}else{
//getComputedStyle:計算過後的樣式
return getComputedStyle(obj,false)[name];//不相容IE8--
}
}
function move(obj,name,target ,dur,fn){
var count = parseInt(dur/30);//總次數
var start = parseFloat(getStyle(obj,name));//開始的距離
var dis = target - start;//距離
// 步長
// var step =dis/count ;
var n = 0;//當前步數
timer = setInterval(function (){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}
#},30)
}
oDiv.onclick = function(){
move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
# })
}
}
待絕....
以上是javascript運動框架的實例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!