html漂浮广告随页面移动代码,JS实现悬浮移动窗口(悬浮广告)的特效

以下是一个基于JavaScript的悬浮广告的实现代码：

<style>
    #float-ad {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        z-index: 9999;
    }
</style>
<div id="float-ad">悬浮广告</div>
<script>
    var floatAd = document.getElementById('float-ad');
    var startX = 50; // 初始位置x坐标
    var startY = 50; // 初始位置y坐标
    var endX = 500; // 结束位置x坐标
    var endY = 300; // 结束位置y坐标
    var speed = 10; // 移动速度

    // 设置广告初始位置
    floatAd.style.left = startX + 'px';
    floatAd.style.top = startY + 'px';

    // 定时器控制广告移动
    setInterval(function() {
        // 计算广告当前位置
        var x = parseFloat(floatAd.style.left);
        var y = parseFloat(floatAd.style.top);

        // 计算广告移动方向
        var dx = endX - x;
        var dy = endY - y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        var directionX = dx / distance;
        var directionY = dy / distance;

        // 计算广告移动距离
        var moveX = directionX * speed;
        var moveY = directionY * speed;

        // 移动广告
        floatAd.style.left = (x + moveX) + 'px';
        floatAd.style.top = (y + moveY) + 'px';
    }, 50);
</script>

该代码实现了一个悬浮广告，广告会从起始位置移动到结束位置，并以一定速度移动，直到到达目标位置。可以根据需要修改起始位置、结束位置和移动速度来调整广告的运动效果。