物理弹性滚动 js 对联广告代码

物理弹性滚动JS对联广告代码实现

理解需求

您希望实现一个带有物理弹性滚动的对联广告，即广告在页面上显示时，具有类似物理物体被弹动的效果。

实现思路

• HTML结构： 创建一个包含对联内容和关闭按钮的div容器。
• CSS样式： 设置广告容器的初始位置、尺寸、以及过渡效果，为弹性效果做准备。
• JavaScript：
  • 使用JavaScript控制广告容器的初始位置和最终位置。
  • 利用CSS的transition属性实现过渡效果。
  • 模拟弹性效果可以通过计算每次弹跳的高度，逐渐减小弹跳幅度，直到静止。

代码实现

<div class="ad-container">
  <img src="your-ad-image.jpg" alt="对联广告">
  <span class="close">X</span>
  <div class="ad-content">
    <p>上联：...</p>
    <p>下联：...</p>
  </div>
</div>

.ad-container {
  position: fixed;
  top: -100px; /* 初始位置在屏幕上方 */
  right: 20px;
  transition: top 0.5s ease-in-out;
}

const adContainer = document.querySelector('.ad-container');
const closeBtn = document.querySelector('.close');

// 模拟弹跳效果函数
function bounce(element, maxHeight) {
  let currentHeight = -maxHeight;
  let velocity = 10;
  let gravity = 0.5;

  function animate() {
    currentHeight += velocity;
    velocity -= gravity;

    if (currentHeight > 0) {
      currentHeight = maxHeight;
      velocity = -velocity * 0.8; // 每次弹跳速度减小80%
    }

    element.style.top = currentHeight + 'px';

    if (Math.abs(velocity) < 1) {
      return;
    }

    requestAnimationFrame(animate);
  }

  animate();
}

// 显示广告并触发弹跳效果
adContainer.style.display = 'block';
bounce(adContainer, 100); // 最大弹跳高度为100px

// 关闭按钮点击事件
closeBtn.addEventListener('click', () => {
  adContainer.style.display = 'none';
});

代码解释

• 初始位置： 将广告容器的初始位置设置在屏幕上方，以便从上向下弹跳。
• 弹跳效果： 使用requestAnimationFrame实现动画循环，通过不断更新元素的top属性模拟弹跳效果。
• 速度和重力： 通过调整velocity和gravity的值，可以控制弹跳的幅度和速度。
• 阻尼效果： 每次弹跳后，速度乘以一个系数，模拟阻尼效果，使弹跳逐渐减弱。

注意事项

• 浏览器兼容性： requestAnimationFrame是现代浏览器支持的API，对于不支持的浏览器需要提供兼容性处理。
• 性能优化： 如果需要同时显示多个弹性广告，需要注意性能优化，避免影响页面流畅性。
• 用户体验： 弹跳效果不宜过强，以免干扰用户操作。
• 自定义： 可以根据需要调整弹跳的高度、速度、阻尼系数等参数，实现不同的弹跳效果。

扩展功能

• 自定义弹跳曲线： 可以使用更复杂的数学公式来模拟不同的弹跳曲线。
• 添加声音效果： 在弹跳过程中添加声音效果，增强用户体验。
• 支持触摸事件： 在移动端，可以使用触摸事件来触发弹跳效果。

其他实现方式

除了使用JavaScript实现，还可以使用CSS3的animation属性来实现弹跳效果。不过，CSS3的动画在复杂度和自定义性方面可能不如JavaScript。

温馨提示： 在实际应用中，您可能需要根据您的具体需求对代码进行调整和优化。

希望这份代码能帮助您实现物理弹性滚动的对联广告效果！

如果您还有其他问题，欢迎随时提出。

关键词： 物理弹性滚动，JS动画，对联广告，CSS transition，requestAnimationFrame