服务器之家

服务器之家 > 正文

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

时间:2021-08-31 16:31     来源/作者:#麻辣小龙虾#

本文实例为大家分享了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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部