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; // 移动速度
    var directionX = 1; // 移动方向x
    var directionY = 1; // 移动方向y

    // 设置广告初始位置
    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 moveX = directionX * speed;
        var moveY = directionY * speed;

        // 移动广告
        floatAd.style.left = (x + moveX) + 'px';
        floatAd.style.top = (y + moveY) + 'px';

        // 判断是否触碰边缘
        if (x + moveX < 0 || x + moveX > window.innerWidth - parseFloat(floatAd.style.width)) {
            directionX = -directionX;
        }
        if (y + moveY < 0 || y + moveY > window.innerHeight - parseFloat(floatAd.style.height)) {
            directionY = -directionY;
        }
    }, 50);
</script>

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