<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var directX=1;//x轴的方向 var directY=1;//y轴的方向 var moveX=0;//图片的坐标 var moveY=0; var speed=2;//移动的速度 function move(){ moveX+=directX*speed; moveY+=directY*speed; var nr=document.getElementById("moveDiv"); nr.style.top=moveY+"px";//改变div 的top nr.style.left=moveX+"px";//改变div的left if (moveX+nr.offsetWidth>=document.body.clientWidth||moveX<=0){ directX=-directX;//当碰触到边界的时候 改变方向 } if (moveY+nr.offsetHeight>=document.documentElement.clientHeight||moveY<=0){ directY=-directY; } } setInterval(move,20); </script> </head> <body> <div id="moveDiv" style=" position: absolute;"> <img src="image/123.jpg" width="300px" height="80px"> </div> </body> </html>
Js制作移动漂浮广告
猜你喜欢
转载自blog.csdn.net/qq_35222261/article/details/52049498
今日推荐
周排行