您的位置: 首页  >  IT文章  >  关于html页面上图片飞动的有关问题

关于html页面上图片飞动的有关问题

分类: IT文章 • 2024-12-26 15:54:37
关于html页面上图片飞动的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片fly</title>

<script type="text/javascript">
var x=1,y=1,movex=0,movey=0;
function movead()
{
var divNode=document.getElementById("adid");
movex  =movex + x*5;
movey  =movey + y*5;

divNode.style.left=movex;
divNode.style.top=movey;
if((movex+divNode.offsetWidth)>=document.body.clientWidth)
x=-1;
else if(movex<=0)
x=1;
if((movey+divNode.offsetHeight)>=document.body.clientHeight)
y=-1;
else if(movey<=0)
y=1;
}
var timeid;
function over()
{
clearInterval(timeid);
}
function out()
{
fly();
}
function closed()
{
var divNode = document.getElementById("adid");
divNode.style.display="none";

over();
}
function fly()
{
timeid = setInterval("movead()",10);
}

window.onload=function(){fly();}
</script>
<script type="text/javascript">

function kan()
{
alert(movex);
}
</script>
</head>

<body>
<input type="button" value="广告" onclick="movead()" /><br />
<div style="position:absolute;left:700px;top:0"><input type="button" value="看值" onclick="kan()" /></div>


<div id="adid" style="position:absolute;left:0px;top:0px" onmouseover="over()" onmouseout="out()">
<a href="http://www.baidu.com" target="_blank"><img src="01.jpg" height="100px" width="150px" /></a><br/>
<a href="javascript:void(0)" onclick="closed()">关闭</a></div>

<img src="001.jpg" height="600" width="700" border="2" />

</body>
</html>

这段代码，在网页上面图片根本就不会动。

但是movex，movey的值又一直在变，换了IE，360，谷歌，火狐运行都一样不会动。

我也不知道哪里错了，求大家帮我看看。
------解决思路----------------------
divNode.style.left=movex+'px';
divNode.style.top=movey+'px';

加了xhtml申明一定要加单位，要不无效。不管加不加xhtml，你记得加单位绝对不会错的
------解决思路----------------------
关于html页面上图片飞动的有关问题divNode.style.left，，，css的变换方式是要单位的，，，，如果是jq就可以免除。。。

相关推荐