弹性运动

最新推荐文章于 2020-10-18 13:59:58 发布

原创最新推荐文章于 2020-10-18 13:59:58 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一个使用CSS和JavaScript实现的动态背景效果案例，通过鼠标悬停触发元素动画，展示了网页设计中视觉效果的创意应用。文章详细解释了如何设置HTML结构，定义CSS样式以创建动态背景，并使用JavaScript来响应鼠标事件，调整元素位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style>
    ul {
      position: relative;
      margin: 100px auto 0px;
      width: 800px;
      height: 100px;
    }

    ul .ele {
      float: left;
      width: 198px;
      border: 1px solid black;
      background: orange;
      height: 98;
      line-height: 98px;
      text-align: center;
      list-style: none;
    }

    .bg {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 200px;
      height: 100px;
      opacity: 0.4;
      background: deeppink;
      list-style: none;
    }
  </style>
</head>

<body>

  <ul>
    <li class="ele">cst</li>
    <li class="ele">cg</li>
    <li class="ele">dg</li>
    <li class="ele">dcg</li>
    <li class="bg"></li>
  </ul>
</body>

<script>
  const li = document.getElementsByTagName("li");
  const lastLi = li[li.length - 1];
  let timer = null;
  for (let i = 0; i < li.length - 1; i++) {
    li[i].onmouseenter = function () {
      startMove(lastLi, this.offsetLeft)
    }
  }

  function startMove(dom, target) {
    clearInterval(timer);
    let a = 2;
    let iSpeed = 7;
    let u = 0.7;
    timer = setInterval(() => {
      a = (target - dom.offsetLeft) / 7
      iSpeed = (iSpeed + a) * u;
      if (Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {
        dom.style.left = target;
        clearInterval(timer)
      } else {
        dom.style.left = dom.offsetLeft + iSpeed + "px";
      }
    }, 20);
  }
</script>

</html>