问题描述
- 想让一个图片在窗口里弹动，碰到页面边框则反弹。
-
我想让一个图片或者是广告之类的，在我页面一开始加载时就从某一个点开始动，最好是从左上角一直往下走，碰到页面边框则反弹，以此类推。
求解！！！！ 谢谢。
解决方案
DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>图片浮动</title>
<style>
#img{
position:absolute;
}
</style>
</head>
<body>
<img src="http://avatar.csdn.net/8/A/6/2_oyljerry.jpg" width=50 height=50 id="img">
<script>
//获取图片的对象
var img=document.getElementById("img");
//设置图片的起始点坐标
var x=0,y=0;
//设置图片的行进速度
var xSpeed=10; //横坐标的行进速度
var ySpeed=10; //纵坐标的行进速度
//设置图片的最大移动范围
var w=Math.max(document.documentElement.clientWidth,document.body.clientWidth)-50; //横向移动的最大范围
var h=Math.max(document.documentElement.clientHeight,document.body.clientHeight)-50; //纵向移动的最大范围
window.onresize=function(){
w=Math.max(document.documentElement.clientWidth,document.body.clientWidth)-50; //横向移动的最大范围
h=Math.max(document.documentElement.clientHeight,document.body.clientHeight)-50; //纵向移动的最大范围
}
function floatimg(){
//判断图片是否达到了边界
//1、如果达到了,那我们就改变图片的方向
//2、如果没有达到，设置坐标值为 起始坐标+速度
if(x>w||x<0){x=x<0?0:w;xSpeed=-xSpeed;}else x+=xSpeed;
if(y>h||y<0){y=y<0?0:h;ySpeed=-ySpeed;}else y+=ySpeed;
//使图片按规定坐标移动
img.style.left=x+"px";
img.style.top=y+"px";
//设置图片移动的时间间隔
setTimeout(floatimg,50);
}
floatimg();
</script>
</body>
</html>
时间： 2025-01-13 05:30:23