基于JS实现弹性漂浮广告的示例代码

下面是基于JS实现弹性漂浮广告的完整攻略：

思路

1. 使用position: fixed实现元素的固定位置，定义元素距离浏览器顶部的距离。
2. 在需要使用该广告的页面中添加JS文件或script代码段。
3. 通过JS代码，利用setInterval来实现广告元素的动态滚动。
4. 通过监听窗口大小的变化，实现响应式布局，调整广告元素的位置和大小。

代码实现

CSS

定义广告元素的样式。

.floating-ad {
    position: fixed;
    top: 30%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
    display: none; /* 初始隐藏广告 */
}

JS

1. 获取广告元素对象，以及定义元素最大宽度和高度。
2. 使用setInterval函数设置定时器，定义广告元素的滚动速度和容器宽度。
3. 通过监听窗口大小的变化，实现广告元素的位置和大小的动态调整。
4. 通过监听鼠标滚轮事件，实现广告元素的动态显示与隐藏。

示例1：最简单的实现方案

// 获取广告元素以及定义最大宽度、高度
const ad = document.querySelector('.floating-ad');
const maxWidth = 600;
const maxHeight = 300;

// 定义广告元素滚动速度（px/s）和容器宽度
let speed = 100;
let containerWidth = document.body.clientWidth;

// 设置定时器，实现广告元素的滚动效果
setInterval(() => {
    let adWidth = ad.clientWidth;
    let adHeight = ad.clientHeight;
    // 当广告元素超过最大宽度或高度时，重置广告元素的大小和位置
    if (adWidth > maxWidth || adHeight > maxHeight) {
        ad.style.width = maxWidth + 'px';
        ad.style.height = maxHeight + 'px';
        ad.style.top = '30%';
        ad.style.left = (containerWidth - maxWidth) / 2 + 'px';
    }
    // 计算广告元素新的left值，并更新广告元素的位置
    let newLeft = parseFloat(ad.style.left) + speed / 100;
    if (newLeft >= containerWidth - adWidth) {
        newLeft = containerWidth - adWidth;
        speed = -speed;
    }
    if (newLeft <= 0) {
        newLeft = 0;
        speed = -speed;
    }
    ad.style.left = newLeft + 'px';
}, 16);

// 监听窗口大小变化，动态调整广告元素的位置和大小
window.addEventListener('resize', () => {
    containerWidth = document.body.clientWidth;
    ad.style.left = (containerWidth - ad.clientWidth) / 2 + 'px';
    ad.style.top = '30%';
});

// 监听鼠标滚轮事件，实现广告元素的动态显示和隐藏
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
        ad.style.display = 'none';
    } else {
        ad.style.display = 'block';
    }
    lastScrollTop = scrollTop;
});

示例2：结合jQuery实现更加简洁优雅的代码

$(function() {
    const ad = $('.floating-ad');
    const maxWidth = 600;
    const maxHeight = 300;
    let speed = 100;
    let containerWidth = $(window).width();

    setInterval(() => {
        if (ad.width() > maxWidth || ad.height() > maxHeight) {
            ad.width(maxWidth).height(maxHeight).css({
                top: '30%',
                left: (containerWidth - maxWidth) / 2
            });
        }
        let newLeft = parseFloat(ad.css('left')) + speed / 100;
        if (newLeft >= containerWidth - ad.width()) {
            newLeft = containerWidth - ad.width();
            speed = -speed;
        }
        if (newLeft <= 0) {
            newLeft = 0;
            speed = -speed;
        }
        ad.css('left', newLeft);
    }, 16);

    $(window).on('resize', () => {
        containerWidth = $(window).width();
        ad.css('left', (containerWidth - ad.width()) / 2).css('top', '30%');
    });

    let lastScrollTop = 0;
    $(window).on('scroll', () => {
        let scrollTop = $(window).scrollTop();
        if (scrollTop > lastScrollTop) {
            ad.hide();
        } else {
            ad.show();
        }
        lastScrollTop = scrollTop;
    });
});

示例说明

1. 示例1中，使用原生JS实现广告元素的运动轨迹和响应式布局，代码比较复杂，需要注意各个参数之间的关系，可以帮助初学者了解JS实现动态效果的基本思路和方式。
2. 示例2中，使用jQuery简化了代码，使代码更加简洁优雅，也可以更加方便地应用于实际项目中。同时，该方案还演示了如何使用jQuery来实现响应式布局等常见功能。