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

Posted 2022-01-13 风澜.

漂浮广告的原理：用通俗一点的话来说，漂浮广告就是一个在不断改变自身位置的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);
        );```