一.使用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 ></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";
}效果圖：
當鼠標沒有點擊標簽時，橫線默認是在第一個標簽下，如圖：
當點擊任何一個標簽，下劃線和圖片就會平滑的過度到點擊的那個標簽下，如圖：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
