jQuery 仿淘宝 鼠标悬停显示大图效果

页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果.

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

<script type="text/javascript" src="bigpic.js"></script> 

<link rel="stylesheet" href="bigpic.css" type="text/css" />

 

如果某个图片需要显示大图:

<img src="images/shoe1_small.jpg" bigpic="images/shoe1_big.jpg"/>

只需要添加一个 "bigpic" 属性即可.

 

bigpic.js 内容如下.

[javascript]

jQuery(function(){  

    jQuery("img").each(function(i){  

        var p = jQuery(this);  

        var strbp = p.attr("bigpic");  

        if(strbp){  

            var bp = jQuery("<div class='bigpic'></div>").appendTo("body").hide();  

            var w = this.width;  

            p.mouseover(function(){  

                bp.fadeIn();  

                var offset = p.offset();  

                bp.css("top", offset.top).css("left", offset.left+w+5);  

                if(bp.html()=="")  

                    bp.html("<img src=""+p.attr("bigpic")+"" mce_src=""+p.attr("bigpic")+"">");  

            }).mouseout(function(){  

                bp.fadeOut();  

            });  

        }  

    });  

});  

 

bigpic.css 内容:

[css]

.bigpic  

{  

    position:absolute;  

    float:left;  

    border:#ccc 1px solid;  

}