js实现点击选项置顶动画效果
更新时间：2020年08月25日 10:22:17 作者：#麻辣小龙虾#
这篇文章主要为大家详细介绍了js实现点击选项置顶动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现点击选项置顶动画的具体代码，供大家参考，具体内容如下
<!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;}
li button {float:right;position:relative;top:40px;right:30px;}
</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript onkeydown实现键盘快捷键控制页面
2008-04-04
这篇文章主要介绍了微信小程序用户拒绝授权的处理方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
在前端开发中,实现文件下载是一个非常常见的需求,本篇文章将介绍 4 种前端文件下载的方式,并提供详细示例,希望能帮助大家掌握文件下载的各种技巧2025-04-04
这篇文章主要为大家介绍了巧妙解决Layui.table组件分页问题方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验，是一篇有意思的围绕setTimeout展开的前端开发考题，考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等，一不小心你可能就会做错，快来看看你有没有掌握了上面的知识。2017-06-06
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍单例模式，举例说明单例模式的技术、弊端等，对单例模式进行详细剖析，感兴趣的小伙伴们可以参考一下2015-11-11
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
这篇文章主要介绍了JavaScript设计模式之工厂模式和抽象工厂模式,结合实例形式分析了工厂模式的功能、定义、相关问题解决方法,并分析抽象工厂模式与工厂模式的不同之处,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JavaScript实现的一个计算数字步数的算法分享,本文先是讲解了算法描述与实现原理,然后给出实现代码,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS简单封装的图片无缝滚动效果,结合完整实例形式分析了javascript针对图片无缝滚动功能实现的具体操作技巧,包括鼠标事件响应、事件函数及页面元素属性动态变换等相关操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了js实现交换运动效果的方法,涉及javascript操作页面元素与相关样式实现交换运动效果的技巧,需要的朋友可以参考下2015-04-04
最新评论