Jquery實現樹樁導航 展示一下效果？ 當我滑鼠在導航移動的時候下麵的圖片隨著滑鼠的移動而變化 實現思路 1. 找到要知道要操作的對象並加上相對應的事件 2. 為當前對象添加樣式： 方法的講解 $（） jqerry（）的簡寫 addClass（）添加樣式 siblings（） 兄弟們 remove ...
Jquery實現樹樁導航
展示一下效果？
當我滑鼠在導航移動的時候下麵的圖片隨著滑鼠的移動而變化
實現思路
1. 找到要知道要操作的對象並加上相對應的事件
2. 為當前對象添加樣式：
方法的講解
$（） jqerry（）的簡寫 addClass（）添加樣式 siblings（） 兄弟們 removeClass（）移除樣式 index（）索引 function（）函數 eq（）選擇
筆者在這裡寫了一個關於滑鼠滑動變換圖片的效果
Jquery滑動導航
<title>Document</title>
<style>
*{margin:0;
padding:0;
}
.warp{ width:560px; height:215px;border:1px solid gray; }
.nav li{
list-style:none; float:left;
padding-left:5px; width:93.3px;height:30px;
line-height:30px;
text-align:center; border:1px solid gray;
box-sizing:border-box;
}
.con .show{
display:block;
}
.con div{
display:none;
}
.selected{
}
</style>
</head>
<body>
<div class="warp">
<div class="nav">
<ul>
<li>健康</li>
<li>秒殺</li>
<li>彩電</li>
<li>手機</li>
<li>空調</li>
<li>電器</li>
</ul>
</div>
<div class="con">
<div class="show"><img src="img/poster1.jpg"/> </div>
<div><img src="img/poster2.jpg"/></div>
<div><img src="img/poster3.jpg"/></div>
<div><img src="img/poster4.jpg"/></div>
<div><img src="img/poster5.jpg"/></div>
<div><img src="img/poster6.jpg"/></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
$(".nav li").mousemove(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var i=$(this).index();
$(".con div").eq(i).addClass("show").siblings().removeClass("show");
});
</script>
</body>
</html>
