Js实现点击置顶效果（带动画）

最新推荐文章于 2024-01-23 13:27:59 发布

Sestid

最新推荐文章于 2024-01-23 13:27:59 发布

阅读量671

点赞数 1

分类专栏： Js和jQuery实现的特效❤️

本文链接：https://blog.csdn.net/Sestid/article/details/102523128

版权

Js和jQuery实现的特效❤️ 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

样式图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js置顶动画</title>
    <style>
      *{margin:0;padding:0;}
      ul {width: 1000px;margin:100px auto;position:relative;}
      li {position:absolute;height: 100px;width:900px;font-size:30px;background:#fff;line-height:100px;border:1px solid #eee;list-style:none;padding-left:50px;margin-top:-1px;transition:all .8s ease;background-color: green;}
      li button {float:right;position:relative;top:40px;right:40px;width:50px;height:30px;background-color: red;}
    </style>
</head>
<body>
  <ul>
    <li data-index="0">
      <span>内容0</span>
      <button>置顶</button>
    </li>
    <li data-index="1">
      <span>内容1</span>
      <button>置顶</button>
    </li>
    <li data-index="2">
      <span>内容2</span>
      <button>置顶</button>
    </li>
    <li data-index="3">
      <span>内容3</span>
      <button>置顶</button>
    </li>
    <li data-index="4">
      <span>内容4</span>
      <button>置顶</button>
    </li>
  </ul>
</body>
<script>
  function $$(str) {return document.querySelectorAll(str);}
  // 初始化排序
  function intData () {
    for (let i = 0, len = $$('ul li').length; i < len; i++) {
      $$('ul li')[i].style.top = (i * 101) + 'px'; 
      $$('ul li')[i].style.zIndex = (i * 101); 
    }
  }
  function bindEvent () {
    for (let i = 0, len = $$('ul li').length; i < len; i++) {
      $$('ul li')[i].onclick = function() {
        // 将点击的节点追加到第一个
        let first = this.parentNode.firstChild;
        this.parentNode.insertBefore(this, first);
        setTimeout(() => {
          intData();
        }, 50);
      };
    }
  }
  intData();
  bindEvent();
</script>
</html>

Sestid

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Js实现点击置顶效果（带动画）

样式图：代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *{margin:0;padding:0;} ul {width: 1...
复制链接

扫一扫