js动态效果

// 示例：使用 requestAnimationFrame 实现平滑滚动
function smoothScroll(target, duration) {
    var targetElement = document.querySelector(target);
    var targetPosition = targetElement.getBoundingClientRect().top;
    var startPosition = window.pageYOffset;
    var distance = targetPosition;
    var startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        var timeElapsed = currentTime - startTime;
        var run = ease(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

// 调用示例
smoothScroll('#section1', 1000);

// 示例：添加和移除事件监听器
function handleClick() {
    console.log('Element clicked!');
}

var button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// 在适当的时候移除监听器
button.removeEventListener('click', handleClick);

// 示例：使用 Modernizr 进行特性检测
if (Modernizr.flexbox) {
    // 支持 Flexbox 布局
} else {
    // 不支持 Flexbox 布局的处理逻辑
}