百度图片搜索页的图片展示列表模块jquery效果

<ul class="main">
    <li>
        <div class="li_div">
            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>
            <div class="tagbox">
                <ul class="tags">
                    <li class="tit"><a href="#">美女</a></li>
                    <li><a href="#">苍井空</a></li>
                    <li><a href="#">松岛枫</a></li>
                    <li><a href="#">范冰冰</a></li>
                    <li><a href="#">苍井空</a></li>
                    <li><a href="#">松岛枫</a></li>
                    <li><a href="#">范冰冰</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="li_div">
            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>
            <div class="tagbox">
                <ul class="tags">
                    <li class="tit"><a href="#">美女</a></li>
                    <li><a href="#">苍井空</a></li>
                    <li><a href="#">松岛枫</a></li>
                    <li><a href="#">范冰冰</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="li_div">
            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>
            <div class="tagbox">
                <ul class="tags">
                    <li class="tit"><a href="#">美女</a></li>
                    <li><a href="#">苍井空</a></li>
                    <li><a href="#">松岛枫</a></li>
                    <li><a href="#">范冰冰</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="li_div">
            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>
            <div class="tagbox">
                <ul class="tags">
                    <li class="tit"><a href="#">美女</a></li>
                    <li><a href="#">苍井空</a></li>
                    <li><a href="#">松岛枫</a></li>
                    <li><a href="#">范冰冰</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

*{ margin:0; padding:0; font-size:12px;}
img{ border:0;}
ul{ list-style:none;}
.main{ width:300px; height:180px; margin:20px auto;}
.main li{ position:relative; float:left; width:150px; height:90px; background:#000;}
.li_div{ position:absolute; width:150px; height:90px; overflow:hidden;}
.cur{ z-index:100; box-shadow:0 0 5px #000;}
.cur img{ opacity:1; *filter:alpha(opacity=100);}
.not_cur{ opacity:.5; *filter:alpha(opacity=50);}
.tagbox{ position:absolute; left:0; bottom:0; width:46px; height:21px; overflow:hidden; border-radius:0 11px 11px 0; background:#252525; opacity:.5; *filter:alpha(opacity=50);}
.tags{ display:block; width:100%; height:21px; overflow:hidden; color:#f7f7f7;}
.tags li{ float:left; width:42px; text-align:center; background:transparent;}
.tags a{ display:block; line-height:21px; color:#f7f7f7; text-decoration:none; padding:0 3px;}
.tags li.tit{ width:65px; text-align:left;}
.tags li.tit a{ padding:0 10px; font-weight:bold;}

$(function(){
    $(".li_div").each(function(i, target){
        $(target).mouseenter(function(e){
            //stop current animation
            $(target).stop();
            $(target).find(".tagbox").stop(false, true);
            $(target).parent().addClass("cur");
            $(".li_div").not($(target)).addClass("not_cur");
            $(target).find(".tagbox").animate({width:"211px"}, "normal");
            $(target).animate({width:"200px", height:"120px",top:"-15px",left:"-25px"},"normal");
        });
        $(target).mouseleave(function(e){
            $(target).stop();
            $(target).find(".tagbox").stop(false, true);
            $(target).parent().removeClass("cur");
            $(".li_div").not($(target)).removeClass("not_cur");
            $(target).find(".tagbox").animate({width:"46px"}, "normal");
            $(target).animate({ width:"150px", height:"90px", top:"0", left:"0"}, "normal");
        });
    });
});

point：

* 使用了jquery的mouseenter，mouseleave方法，避免了事件冒泡可能出现的冲突

* 图片外框使用relative，图片实际模块absolute到（实际放大图片-初始图片）/2的left和top的负值来实现绝对居中

* ie6-8还有border-radius圆角无法实现，猜测百度应该是hack一张圆角背景图片的

* 百度上是底色白色的，这样非焦点图片有很淡很模糊的效果，我增加li外框大块元素底色为黑色，这样的话非当前图片的时候0.5的透明度衬合黑色底色刚好突出当前的高亮

原文转至：百度图片搜索效果

转载于:https://www.cnblogs.com/archrjoe/archive/2013/02/27/2934906.html