JavaScript实现图片移动效果

图片标签

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