您好,登錄后才能下訂單哦!
這篇文章主要講解了“怎么用JS實現(xiàn)百度新聞導(dǎo)航欄效果”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“怎么用JS實現(xiàn)百度新聞導(dǎo)航欄效果”吧!
具體內(nèi)容如下
最近在學Web前端,用js簡單實現(xiàn)了百度新聞導(dǎo)航欄的效果。當鼠標移動到某一選項上方時,會有一個紅色背景塊滑動到當前選項上。當點擊某一選項后,固定的紅色背景塊位置會移動到當前選項,意為當前選項被選中。話不多說,代碼如下
body部分
<div class="box"> <!--兩個紅色背景塊--> <!--隨鼠標移動的背景塊--> <div id="move"></div> <!--鼠標點擊后固定在某處的背景塊--> <div id="fixed"></div> <a href="#">主頁</a> <a href="#">國內(nèi)</a> <a href="#">國際</a> <a href="#">軍事</a> <a href="#">財經(jīng)</a> <a href="#">娛樂</a> <a href="#">體育</a> <a href="#">互聯(lián)網(wǎng)</a> <a href="#">科技</a> <a href="#">游戲</a> <a href="#">女人</a> <a href="#">汽車</a> <a href="#">房產(chǎn)</a> </div>
css部分
*{ margin: 0; padding: 0; } .box{ top:100px; width: 790px; height: 30px; font-size: 0; position: relative; margin: 0 auto; background-color: #01204f; } a{ display: inline-block; position: relative; width: 60px; height: 30px; line-height: 30px; color: white; font-size: 16px; text-decoration: none; text-align: center; transition: all 0.6s; } #move{ position: absolute; background-color: red; top: 0px; left: 0px; width: 60px; height: 30px; transition: all 0.6s; } #fixed{ position: absolute; background-color: red; top: 0px; left: 0px; width: 60px; height: 30px; }
js部分
window.onload = function () { let move = document.getElementById("move");//滑動的背景塊 let fixed = document.getElementById("fixed");//固定在某處的背景塊 let aList = document.getElementsByTagName("a");//a標簽列表 let left = move.offsetLeft + "px";//滑動背景塊的初始位置 //使所有a標簽綁定移入、移出、單擊事件 for (let i = 0; i < aList.length; i++) { aList[i].onmouseover = function () { // 鼠標移入某個a標簽時,滑動背景塊滑到當前a標簽的位置 move.style.left = aList[i].offsetLeft + "px"; } aList[i].onmouseout = function () { // 鼠標移出a標簽時,滑動背景塊返回初始位置 move.style.left = left; } aList[i].onclick = function () { // 某個a標簽被點擊后,固定背景塊移動到當前a標簽的位置 fixed.style.left = aList[i].offsetLeft + "px"; // 將滑動背景塊的初始位置更新為當前a標簽的位置 left = aList[i].offsetLeft + "px"; } } }
感謝各位的閱讀,以上就是“怎么用JS實現(xiàn)百度新聞導(dǎo)航欄效果”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對怎么用JS實現(xiàn)百度新聞導(dǎo)航欄效果這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。