码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-21 19:30:19      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

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

标签:

原文地址:http://www.cnblogs.com/nifengs/p/4826844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!