Jquery实现滑动导航
- 作者: 一个人一座城59217399
- 来源: 51数据库
- 2021-08-24
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>
