一.使用js实现导航行栏,点击时,下划线会跟着鼠标的点击移动。
html代码如下:
<header> <div id="nav1"> <div id="id1" class="item">1</div> <div id="id2" class="item">2</div> <div id="id3" class="item">3</div> </div> <div id="line"></div> </header>
css代码如下:
*{ margin:0; padding:0; } body{ background: url("./img/wallhaven1.png"); } .item{ width: 100px; height: 30px; margin-bottom: 5px; margin-left: 5px; padding: 5px 10px; background: #B89C9B; text-align: center; line-height: 30px; color:white; border-radius: 10px; } #line{ color:red; width: 4px; height: 40px; background: red; position: absolute; top:0px; padding-right: 1px; }
js代码如下:
<script> function avtiveLineTop(n) { document.getElementById(‘line‘).style.top = n + ‘px‘; }; var nav1 = document.getElementById("nav1"); var items = document.getElementsByClassName(‘item‘); nav1.addEventListener("click",handle,false); function handle(event){ var event=event||window.event; var target=event.target||event.srcElement;; switch(target.id){ case "id1": avtiveLineTop(0); break; case "id2": avtiveLineTop(45); break; case "id3": avtiveLineTop(90); break; } } </script>
效果图:
默认时,红色横线在1标签处,点击2时,红色标签,会根据移动函数进行移动,如图(2)
二.在此基础上,根据css3来实现横线的过度平滑效果。
html代码如下:
<section> <ul id="nav2"> <li class="item1"><a href="#" id="id11">课程学习</a></li> <li class="item1"><a href="#" id="id21">课程笔记</a></li> <li class="item1"><a href="#" id="id31">课程练习</a></li> <li class="item1"><a href="#" id="id41">课程相关</a></li> <li class="item1"><a href="#" id="id51">课程拓展</a></li> </ul> <div id="line1"></div> </section> <div style="clear:both;"></div> <div id="pic"> <img src="./img/wallhaven3.png" alt="人物"> </div>
css代码如下:
.item1{ width: 100px; height: 30px; margin-bottom: 5px; margin-left: 5px; padding: 5px 10px; background: #1E293B; float:left; text-decoration:none; color:white; line-height: 30px; border-radius: 10px; } #line1{ color:red; width: 120px; height: 2px; background: red; position: absolute; top:175px; left:5px; padding-top: 1px; } #nav2{ list-style-type: none; } #nav2 a{ display: block; text-decoration:none; color:white; } #nav2 a:hover{ background-color: #1E291a; color:red; } #pic{ margin-top:80px; margin-left: 10px; } img{ width: 200px; height:200px; border-radius: 15px; } .effect0{ transform: translateX(1px); transition:all 2s; } .effect{ transform: translateX(125px); transition:all 2s; } .effect2{ transform: translateX(250px); transition:all 2s; } .effect3{ transform: translateX(375px); transition:all 2s; } .effect4{ transform: translateX(500px); transition:all 2s; } .piceffect{ transform: translateX(600px) scale(1.5); transition: all 2s; }
js代码如下:
var nav2 = document.getElementById(‘nav2‘); var pic = document.getElementById(‘pic‘); nav2.addEventListener("click",move,false); function move(event){ var event=event||window.event; var target=event.target||event.srcElement;; switch(target.id){ case "id11": line1.className = "effect0"; pic.className = "effect0"; break; case "id21": line1.className = "effect"; pic.className = "effect"; break; case "id31": line1.className = "effect2"; pic.className = "effect2"; break; case "id41": line1.className = "effect3"; pic.className = "effect3"; break; case "id51": line1.className = "effect4"; pic.className = "effect4"; break; } } pic.addEventListener("click",showbig,false); function showbig(){ pic.className="piceffect"; }
效果图:
当鼠标没有点击标签时,横线默认是在第一个标签下,如图:
当点击任何一个标签,下划线和图片就会平滑的过度到点击的那个标签下,如图:
时间: 2024-10-31 10:54:12