Js制作移动漂浮广告

最新推荐文章于 2023-03-16 15:39:21 发布

之之遗忘

最新推荐文章于 2023-03-16 15:39:21 发布

阅读量748

点赞数 1

本文链接：https://blog.csdn.net/qq_35222261/article/details/52049498

版权

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

优惠劵

之之遗忘

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js制作移动漂浮广告

html lang="en">head> meta charset="UTF-8"> title>Titletitle> script> var directX=1;//x轴的方向 var directY=1;//y轴的方向 var moveX=0;//图片的坐标 var moveY=0; v
复制链接

扫一扫