原生JS制作简单的漂浮广告

漂浮广告的原理:用通俗一点的话来说,漂浮广告就是一个在不断改变自身位置的div(当然亦可以是其他),并且在遇到界面的边界时改变当前运动的方向;

在这里插入图片描述
**第一步:**制作一个能够移动的div,并给各项参数赋值

<div id="div1"></div>
var div = document.getElementById("div1");
        div.style.width = "200px"
        div.style.height = "200px"
        div.style.background = "red";
        // 相对定位
        div.style.position = "absolute";

        var offsetx = 0;
        var offsety = 0;
        // 初始距离上边界距离
        div.style.top = offsety;
        // 初始距离左边界距离
        div.style.left = offsetx;
        // X轴移动方向标志位 ,1为从左到右,0为从右到左
        var flagx = 1;
        // y轴移动方向标志位 ,1为从上到下,0为从下到上
        var flagy1 = 1;
        // 移动步长
        var step = 20;

**第二步 :**找到正确的下边界位置,上边界和左边界是div一开始接挨着的,所以我们需要找到下边界和右边界。当div移动到最大能够移动的距离,不就是咱们要找的边界了吗

		// 网页可视区域高度
        var seeHeight = document.documentElement.clientHeight;
        // 网页可视区域宽度
        var seeWidth = document.documentElement.clientWidth;
        // 网页可视区域宽度 - 自身宽度 = 在页面最大可移动宽度
        var maxLeft = seeWidth - 200;
        // 网页可视区域宽度 - 自身高度 = 在页面最大可移动高度
        var maxTop = seeHeight - 200;

**第三步:**开始移动,

// 设置定时器
        var t = setInterval(move, 30);

        function move() {
            // 移动
            yidong(flagx, flagy);
            // 当y轴达到下边界时,改变在y轴的移动方向
            if (offsety >= maxTop) {
                flagy = 0;
            }
            // 当x轴达到下边界时,改变在x轴的移动方向
            if (offsetx >= maxLeft) {
                flagx = 0;
            }
            // 当y轴达到上边界时,改变在y轴的移动方向
            if (offsety < 0) {
                flagy = 1;
            }
            // 当x轴达到上边界时,改变在x轴的移动方向
            if (offsetx < 0) {
                flagx = 1;
            }

            div.style.top = offsety + "px"; // 大于页面的高度  top 小于0
            div.style.left = offsetx + "px"; // 大于页面总宽度  left 小于 0 
        }


        function yidong(x, y) {
            if (x == 1 && y == 1) {
                offsetx += step;
                offsety += step;

            }

            if (x == 1 && y == 0) {
                offsetx += step;
                offsety -= step;

            }

            if (x == 0 && y == 1) {
                offsetx -= step;
                offsety += step;

            }

            if (x == 0 && y == 0) {
                offsetx -= step;
                offsety -= step;

            }
        }

**最后一步:**鼠标移入时关闭定时器,移除时再打开定时器

 // 鼠标移入时,漂浮广告暂停
        div.addEventListener("mouseover", function() {

            clearInterval(t);
            console.log(111);
        });
        // 鼠标移出时,漂浮广告开启
        div.addEventListener("mouseout", function() {

            clearInterval(t);
            t = setInterval(move, 30);
        });```


本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>