緊接著上面寫的... 給div加一個邊框，border：1px solid black window.onload = function(){ var div = document.getElementById('div1'); div.onclick = function(){ setInterv ...
緊接著上面寫的...
給div加一個邊框，border：1px solid black
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
}
}
敲玩代碼我們可以發現，寬度應該是一直在減，但是呢。反而增加了，這是為什麼呢？
原來關於offset這一些系列的屬性都會存在這些問題，下麵就來糾正一下
1、currentStyle是當前的樣式，但是不相容谷歌和火狐
2、getComputedStyle是計算過後的樣式，不相容ie8--
具體代碼如下：
傳的參數obj指的是獲取的對象，name是樣式屬性
function getStyle(obj,name){
//currentStyle:當前的樣式
if(obj.currentStyle){
return obj.currentStyle[name];//不相容谷歌和火狐
}else{
//getComputedStyle:計算過後的樣式
return getComputedStyle(obj,false)[name];//不相容IE8--
}
}
下一步我們就需要把move函數進化一下，
需要把start開始的距離從var start = obj.offsetLeft;改為var start = parseFloat(getStyle(obj,name));
因為getStyle(obj,name)獲取到的是字元串，所以需要使用parseFloat轉換類型
具體代碼如下
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;
function getStyle(obj,name){
//currentStyle:當前的樣式
if(obj.currentStyle){
return obj.currentStyle[name];//不相容谷歌和火狐
}else{
//getComputedStyle:計算過後的樣式
return getComputedStyle(obj,false)[name];//不相容IE8--
}
}
function move(obj,name,target,dur){
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++;
obj.style[name] = start+ n*step +'px';
if(n == count){
clearInterval(timer)
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'width',800,1000)
}
}
</script>
之前也學過淡入淡出，這個我們可以用透明度來做，那麼要怎麼做呢？
首先需要判斷一下是不是有opacity這個屬性，如果有的話需要使用透明度*100，因為透明度是小數。否則的話就繼續使用預設的。
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
上述的代碼只能從一個方向運動，但是呢我想先向下走500，然後向左走100，這樣要怎麼做呢？
以前都學過回調函數，如果給他傳一個回調函數，是不是就可以了呢？
在運動到目的地的時候，判斷是不是有回調函數的存在。如果有則執行，反之不執行。
具體代碼如下
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;
function getStyle(obj,name){
//currentStyle:當前的樣式
if(obj.currentStyle){
return obj.currentStyle[name];//不相容谷歌和火狐
}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);
})
}
}
</script>
待續....
