我想让一个图片或者是广告之类的,在我页面一开始加载时就从某一个点开始动,最好是从左上角一直往下走,碰到页面边框则反弹,以此类推。
求解!!!! 谢谢。
想让一个图片在窗口里弹动,碰到页面边框则反弹。
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- Go 旅城通票 2015-01-01 11:25关注
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决评论 打赏 举报无用 1
悬赏问题
- ¥20 删除和修改功能无法调用
- ¥15 kafka topic 所有分副本数修改
- ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
- ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?
- ¥40 串口调试助手打开串口后,keil5的代码就停止了
- ¥15 电脑最近经常蓝屏,求大家看看哪的问题
- ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
- ¥50 C++五子棋AI程序编写
- ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
- ¥15 SQL Server analysis services 服务安装失败