【jQuery小实例】---3 凤凰网首页图片动态效果

---本系列文章所用使用js均可在本博客文件中找到

本页面实现类似于凤凰网首页，鼠标点击新闻，可以在div中显示新闻图片，点击军事显示军事图片的效果。采用的思路是：鼠标悬浮，显示当前div中的内容（图片，文字，新闻，视频等），其他div隐藏效果。
首先是添加js文件，设置html代码。在不同div添加内容。设置样式，最后编写jQuery代码实现效果：

动态图片浏览器

1，添加js文件。

<script src="jquery-1.8.3.js" type="text/javascript"></script>

2，设置静态html效果：一个div嵌套多个div：（找到相对应图片）

<div id="dvTab">
<ul>
<li>新闻</li>
<li>图片</li>
<li>视频</li>
<li>军事</li>
</ul>
<div id="dv1">
<img width="400px" height="200px" src="image/01.JPG" />
</div>
<div id="dv2">
<img width="400px" height="200px" src="image/02.JPG" />
</div>
<div id="dv3">
<img width="400px" height="200px" src="image/03.JPG" />
</div>
<div id="dv4">
<img width="400px" height="200px" src="image/04.JPG" />
</div>
</div>

设置div样式：

<style type="text/css">
#dvTab
{
width: 405px; /*  border: 1px solid blue;*/
height: 220px;
border: 1px solid black;

}

#dvTab ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#dvTab ul li
{
line-height:19px;
text-align:center;
margin-top:0px;
vertical-align:middle;
background-color:Blue;
color:White;
height:20px;
width: 100px;
font-weight: bolder;
font-size: 14px;
float: left;
border-right: 1px solid white;
border-bottom:3px solid white;
cursor: pointer;
}
#dvTab div
{
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>

View Code
2 编写jQuery实现效果

<script type="text/javascript">
$(function () {
$('#dvTab div:gt(0)').css('display', 'none');
$('#dvTab ul li').mousemove(function () {
var txt = $(this).text();
switch (txt) {
case '新闻': $('#dv1').show().siblings('div').hide(0);
break;
case '图片': $('#dv2').show().siblings('div').hide(0);
break;
case '视频': $('#dv3').show().siblings('div').hide(0);
break;
case '军事': $('#dv4').show().siblings('div').hide(0);
break;
}
})
})
</script>

代码注解：

1 $('#dvTab div:gt(0)')中#dvTab是最外层div，里面依次嵌套。所有它包含的div都大于0.div:gt(0)是里面div大于0的所有div

2$(this)即是$('#dvTab ul li')

3 $('#dv1').show().siblings('div').hide(0);获取div1的内容，并且其他兄弟div都隐藏

3 实现效果：