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：可以获取元素的可见高度值，包括边框和内部空白补丁，但超出元素的内容则不被计算。