欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Jquery实现滑动导航

程序员文章站 2022-06-22 12:52:45
Jquery实现树桩导航 展示一下效果？ 当我鼠标在导航移动的时候下面的图片随着鼠标的移动而变化 实现思路 1. 找到要知道要操作的对象并加上相对应的事件 2. 为当前对象添加样式： 方法的讲解 $（） jqerry（）的简写 addClass（）添加样式 siblings（） 兄弟们 remove ......

Jquery实现树桩导航

 

展示一下效果？

 

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>

 

上一篇： Python中变量的作用域

下一篇： YII 项目部署时， 显示空白内容

推荐阅读