个人中心
gpt4 book ai didi

js实现点击选项置顶动画效果

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现点击选项置顶动画效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js实现点击选项置顶动画的具体代码，供大家参考，具体内容如下 。

js实现点击选项置顶动画效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>js置顶动画</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. ul {width: 1000px;margin:100px auto;position:relative;}
  9. 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;}
  10. li button {float:right;position:relative;top:40px;right:30px;}
  11. </style>
  12. </head>
  13. <body>
  14. <ul>
  15. <li data-index="0">
  16. <span>内容0</span>
  17. <button>置顶</button>
  18. </li>
  19. <li data-index="1">
  20. <span>内容1</span>
  21. <button>置顶</button>
  22. </li>
  23. <li data-index="2">
  24. <span>内容2</span>
  25. <button>置顶</button>
  26. </li>
  27. <li data-index="3">
  28. <span>内容3</span>
  29. <button>置顶</button>
  30. </li>
  31. <li data-index="4">
  32. <span>内容4</span>
  33. <button>置顶</button>
  34. </li>
  35. </ul>
  36. </body>
  37. <script>
  38. function $$(str) {return document.querySelectorAll(str);}
  39. // 初始化排序
  40. function intData () {
  41. for (let i = 0, len = $$('ul li').length; i < len; i++) {
  42. $$('ul li')[i].style.top = (i * 101) + 'px';
  43. $$('ul li')[i].style.zIndex = (i * 101);
  44. }
  45. }
  46. function bindEvent () {
  47. for (let i = 0, len = $$('ul li').length; i < len; i++) {
  48. $$('ul li')[i].onclick = function() {
  49. // 将点击的节点追加到第一个
  50. let first = this.parentNode.firstChild;
  51. this.parentNode.insertBefore(this, first);
  52. setTimeout(() => {
  53. intData();
  54. }, 50);
  55. };
  56. }
  57. }
  58. intData();
  59. bindEvent();
  60. </script>
  61. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们.

原文链接：https://blog.csdn.net/CodingNoob/article/details/102480374 。

最后此篇关于js实现点击选项置顶动画效果的文章就讲到这里了,如果你想了解更多关于js实现点击选项置顶动画效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： js实现数字跳动到指定数字
文章推荐： k8s和Docker关系简单说明
文章推荐： C++实现LeetCode(81.在旋转有序数组中搜索之二)
文章推荐： Docker Machine深入详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com