JavaScript實現圖片移動效果

圖片標簽

<img id="adsimg" src="a1.gif">

css樣式

width: 100px;
height: 100px;
position: absolute;
left: 0px;
top: 0px;

js代碼

var adsimg = document.getElementById('adsimg');//獲取圖片
var step = 1;//步長
var ptop =parseInt(adsimg.offsetTop);//圖片距離頂部的長度
var tmx = setInterval("adsmove()", 10);//定時器
function adsmove() {
     var ntop = ptop + step;//圖片移動
     var topm = innerHeight - ptop;//圖片距離底部的長度
     ptop =parseInt(adsimg.offsetTop);
     adsimg.style.top = ntop + 'px';//賦值新距離
     if (topm < adsimg.offsetHeight+10) {
         clearInterval(tmx);//清除定時器
      }
}

offsetTop：當前元素相對於其**定位父元素**的垂直偏移量。

innerHeight：只讀屬性，聲明了窗口的文檔顯示區的高度和寬度，以像素計。

parseInt() 函數解析字符串並返回整數。

offsetHeight：可以獲取元素的可見高度值，包括邊框和內部空白補丁，但超出元素的內容則不被計算。