想让一个图片链接在窗口左侧能上下移动,如果在窗口中部就停止,代码如下。
html代码: <body onload="movediv()">
<div id="adiv" style="z-index:1;left:0px;top:0px;position:absolute; width:74px; height:103px">
<a href="http://www.google.cn"><img id="im" src="images/soa.jpg" alt="ad" style="height: 100px"/></a>
</div>
</body>
javascript代码:<script type="text/javascript">
function movediv(){
var h = Math.round(document.body.offsetHeight/2); //取窗口高度 除以2,取整
var y = document.getElementById("adiv").style.top;//div层的y坐标
var le =parseInt(y) + 100; //div的y坐标+图片高度=图片底部y坐标
if(le>h){ //图片底部低于窗口中间,向上移动1
var divtop = document.getElementById("adiv").style.top;
document.getElementById("adiv").style.top = (parseInt(divtop)-1);
}
if(le<h){ //图片底部高于窗口中间,向下移动1
var divtop = document.getElementById("adiv").style.top;
document.getElementById("adiv").style.top = (parseInt(divtop) + 1);
}
setTimeout(movediv(),800); //800毫秒调用一次
}
</script>情况:打开页面后图片瞬间从顶部移动到中间,然后var h = Math.round(document.body.offsetHeight/2);这行报out of memory at line XX行 错误,不知道如何修改,请指教下。如果代码不好,希望能帮完善下。希望图片的移动能平滑,能随窗口改变移动。
谢谢先。
html代码: <body onload="movediv()">
<div id="adiv" style="z-index:1;left:0px;top:0px;position:absolute; width:74px; height:103px">
<a href="http://www.google.cn"><img id="im" src="images/soa.jpg" alt="ad" style="height: 100px"/></a>
</div>
</body>
javascript代码:<script type="text/javascript">
function movediv(){
var h = Math.round(document.body.offsetHeight/2); //取窗口高度 除以2,取整
var y = document.getElementById("adiv").style.top;//div层的y坐标
var le =parseInt(y) + 100; //div的y坐标+图片高度=图片底部y坐标
if(le>h){ //图片底部低于窗口中间,向上移动1
var divtop = document.getElementById("adiv").style.top;
document.getElementById("adiv").style.top = (parseInt(divtop)-1);
}
if(le<h){ //图片底部高于窗口中间,向下移动1
var divtop = document.getElementById("adiv").style.top;
document.getElementById("adiv").style.top = (parseInt(divtop) + 1);
}
setTimeout(movediv(),800); //800毫秒调用一次
}
</script>情况:打开页面后图片瞬间从顶部移动到中间,然后var h = Math.round(document.body.offsetHeight/2);这行报out of memory at line XX行 错误,不知道如何修改,请指教下。如果代码不好,希望能帮完善下。希望图片的移动能平滑,能随窗口改变移动。
谢谢先。
or:
setTimeout("movediv()",800); //800毫秒调用一次
<script type="text/javascript">
function movediv(){
var obj=document.getElementById("adiv")
var h = Math.round(document.body.offsetHeight/2)+document.body.scrollTop;
var y = obj.style.top;//div层的y坐标
var le =parseInt(y) + 100; //div的y坐标+图片高度=图片底部y坐标
if(le>h){ //图片底部低于窗口中间,向上移动1
var divtop = obj.style.top;
obj.style.top = (parseInt(divtop)-1);
}
if(le<h){ //图片底部高于窗口中间,向下移动1
var divtop = obj.style.top;
obj.style.top = (parseInt(divtop) + 1);
}
//setTimeout(movediv,8); //8毫秒调用一次
//or:
setTimeout("movediv()",8); //8毫秒调用一次
}
</script><body onload="movediv()">
<div id="adiv" style="z-index:1;left:0px;top:0px;position:absolute; width:74px; height:103px;border:1px red solid;">
<a href="http://www.google.cn"><img id="im" src="images/soa.jpg" alt="ad" style="height: 100px"/></a>
</div>
<div style="height:1999px"></div>
</body>