jquery鼠标滑过显示图片特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jquery鼠标滑过显示图片特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jquery鼠标滑过显示图片</title>
	<script id="jquery_172" type="text/javascript" class="library" src="js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div class="list_box">
        <h4 class="list_title">电脑壁纸下载排行</h4>
        <ol class="list">
            <li class="active item_num_top">
                <span class="item_num ">1</span>
                <div class="item_detail">
                    <p><span class="download_num">10005500</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li class="item_num_top">
                <span class="item_num">2</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li class="item_num_top">
                <span class="item_num">3</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">4</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">5</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">6</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">7</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">8</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">9</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
            <li>
                <span class="item_num">10</span>
                <div class="item_detail">
                    <p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
                    <a class="item_img"><img src="images/pic02.jpg"/></a>
                </div>
            </li>
        </ol>
    </div>
    	<style>html,body,div,ol,li,a,img,p,h4 {padding: 0;margin: 0;}
        ol,li {list-style: none;}
        body {
            background: #f3f3f3;
            font-family: "宋体,微软雅黑";
        }
        img {border: none;}

        .list_box {
            color: #333;
            background: #fff;
            width: 235px;
            margin: 20px auto;
            border: 1px solid #e0e0e0;
        }
        .list_box p a {
            color: #333;
            text-decoration: none;
            line-height: 28px;
            display: inline-block;
            *display: inline;
            *zoom:1;
            width: 130px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: middle;
        }
        .list_box a:hover {
            text-decoration: underline;
            color: #f60;
        }
        .list_title {
            font-size: 16px;
            font-weight: bold;
            line-height: 34px;
            border-bottom: 1px solid #e0e0e0;
            background: #f9f9f9;
            padding-left: 12px;
            width:223px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: middle;
        }
        .list {
            font-size: 14px;
            line-height: 28px;
            padding: 6px 12px 6px 35px;
        }
        .list li {
            *zoom:1;
            position: relative;
        }
        .item_num {
            position: absolute;
            display: inline-block;
            *display: inline;
            *zoom:1;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-size: 10px;
            background: #ccc;
            color: #fff;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius:5px;
            margin-right: 7px;
            vertical-align: middle;
            top: 6px;
            left: -26px;
        }
        .item_num_top .item_num {
            background-color: #f60;
        }
        .download_num {
            float: right;
            color: #999;
            font-size: 12px;
            display: inline-block;
            *display: inline;
            *zoom:1;
            width: 48px;
            white-space: nowrap;
            overflow: hidden;
            text-align: right;
        }
        .active .item_img {
            display: block;
        }
        .item_img {
            display: none;
            margin: 3px 0 4px 0;
        }
        .item_img img {
            width: 120px;
            height: 90px;
            padding: 2px;
            border: 1px solid #ccc;
        }
        .item_img img:hover {
            border-color: #f60;
        }</style>
	    		<script>$(document).ready(function() {
            $list_li = $(".list li");
            $list_li.eq(0).addClass("active");
            $list_li.mouseover(function(){
                $(this).addClass("active").siblings().removeClass("active");
           });
        });</script>
	</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)