js實現(xiàn)點擊選項置頂動畫效果
更新時間：2020年08月25日 10:22:17 作者：#麻辣小龍蝦#
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊選項置頂動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)點擊選項置頂動畫的具體代碼，供大家參考，具體內(nèi)容如下
<!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>內(nèi)容0</span>
<button>置頂</button>
</li>
<li data-index="1">
<span>內(nèi)容1</span>
<button>置頂</button>
</li>
<li data-index="2">
<span>內(nèi)容2</span>
<button>置頂</button>
</li>
<li data-index="3">
<span>內(nèi)容3</span>
<button>置頂</button>
</li>
<li data-index="4">
<span>內(nèi)容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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript onkeydown實現(xiàn)鍵盤快捷鍵控制頁面
2008-04-04
這篇文章主要介紹了微信小程序用戶拒絕授權(quán)的處理方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
前端實現(xiàn)文件下載的4種常見方式與實戰(zhàn)示例
在前端開發(fā)中,實現(xiàn)文件下載是一個非常常見的需求,本篇文章將介紹 4 種前端文件下載的方式,并提供詳細示例,希望能幫助大家掌握文件下載的各種技巧2025-04-04
這篇文章主要為大家介紹了巧妙解決Layui.table組件分頁問題方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等，一不小心你可能就會做錯，快來看看你有沒有掌握了上面的知識。2017-06-06
學(xué)習(xí)JavaScript設(shè)計模式(單例模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計模式，其中重點介紹單例模式，舉例說明單例模式的技術(shù)、弊端等，對單例模式進行詳細剖析，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript設(shè)計模式之工廠模式和抽象工廠模式定義與用法分析
這篇文章主要介紹了JavaScript設(shè)計模式之工廠模式和抽象工廠模式,結(jié)合實例形式分析了工廠模式的功能、定義、相關(guān)問題解決方法,并分析抽象工廠模式與工廠模式的不同之處,需要的朋友可以參考下2018-07-07
JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享
這篇文章主要介紹了JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實現(xiàn)原理,然后給出實現(xiàn)代碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS簡單封裝的圖片無縫滾動效果,結(jié)合完整實例形式分析了javascript針對圖片無縫滾動功能實現(xiàn)的具體操作技巧,包括鼠標(biāo)事件響應(yīng)、事件函數(shù)及頁面元素屬性動態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了js實現(xiàn)交換運動效果的方法,涉及javascript操作頁面元素與相關(guān)樣式實現(xiàn)交換運動效果的技巧,需要的朋友可以參考下2015-04-04