您的位置：首页 > 其它

例子：广告图片在网页中飘动，碰到网页边沿改变漂移方向

2015-09-21 17:57 453 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>游戏-小太阳</title>
<style>
html,body{height: 100%;width: 100%;}
#sunDiv{position: absolute;}
#sunDiv img{width: 50px;height: 50px;}
</style>
</head>
<body>
<div id="sunDiv">
<img src="0.jpg">
</div>
<script type="text/javascript">
var sunDiv=document.getElementById("sunDiv");
//定两个方法 全局变量
var directX=1;//X轴横向的方法 初始化为1
var directY=1;//Y轴纵向的方法
var sunX=0;//太阳的坐标
var sunY=0;
function sunMove(){

sunX+=directX;
sunY+=directY;
//修改div的left 和top就OK了
sunDiv.style.left=sunX+"px";
sunDiv.style.top=sunY+"px";
//判断什么时候太阳转变方向
//X方向方法offsetWidth返回 当前对象事件的宽度
if(sunX+sunDiv.offsetWidth>=document.body.clientWidth||sunX<=0)
{
directX=-directX;
}
// //判断Y方向
if(sunY+sunDiv.offsetHeight>=document.body.clientHeight||sunY<=0)
{
directY=-directY;
}
}
setInterval("sunMove()",1);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航