【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>

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 实现效果：