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() {
// 將點擊的節(jié)點追加到第一個
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
在前端開發(fā)中,實現文件下載是一個非常常見的需求,本篇文章將介紹 4 種前端文件下載的方式,并提供詳細示例,希望能幫助大家掌握文件下載的各種技巧2025-04-04
這篇文章主要為大家介紹了巧妙解決Layui.table組件分頁問題方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經驗，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時器setTimeout()、JavaScript閉包、匿名函數和Promise等，一不小心你可能就會做錯，快來看看你有沒有掌握了上面的知識。2017-06-06
這篇文章主要帶領大家學習JavaScript設計模式，其中重點介紹單例模式，舉例說明單例模式的技術、弊端等，對單例模式進行詳細剖析，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript設計模式之工廠模式和抽象工廠模式定義與用法分析
這篇文章主要介紹了JavaScript設計模式之工廠模式和抽象工廠模式,結合實例形式分析了工廠模式的功能、定義、相關問題解決方法,并分析抽象工廠模式與工廠模式的不同之處,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JavaScript實現的一個計算數字步數的算法分享,本文先是講解了算法描述與實現原理,然后給出實現代碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS簡單封裝的圖片無縫滾動效果,結合完整實例形式分析了javascript針對圖片無縫滾動功能實現的具體操作技巧,包括鼠標事件響應、事件函數及頁面元素屬性動態(tài)變換等相關操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了js實現交換運動效果的方法,涉及javascript操作頁面元素與相關樣式實現交換運動效果的技巧,需要的朋友可以參考下2015-04-04