图片自动缩放比例，鼠标经过显示介绍+插件 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="img_show.js"></script>
<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.pic_box{ width:800px;overflow:hidden;}
.pic_box ul{ list-style:none; }
.pic_box ul li{ list-style:none;position:relative; float:left; width:210px; height:210px; padding-right:5px; overflow:hidden}
.pic_box ul li .pic_box_tit{ width:210px; height:100px; position:absolute; top:210px; z-index:999; background-color:#ff0000;}
.pro_ku{border:1px #CCCCCC solid; padding:5px; }
</style>
</head>

<body>
<div class="pic_box">
    <ul>
      <li><img src="img/1.jpg" class="pro_ku" /><div class="pic_box_tit">sdfsdf</div></li>
      <li><img src="img/2.jpg" /><div class="pic_box_tit">222</div></li>
      <li><img src="img/3.jpg" /><div class="pic_box_tit">333</div></li>
      <li><img src="img/3.jpg" /></li>
    </ul>
  </div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(".pic_box ul li").imgshow();
});
</script>
(function($){
$.fn.imgshow=function(){
var maxwidth="200"    ,maxheight="200";    
var img=$(this).find("img");
var vtop="120px",btop="210px";

$(this).hover(function(){
     index=$(this).index(this);
        $(this).find(".pic_box_tit").animate({top:vtop},function(){
                                        $(this).find(".pic_box_tit").css("top",vtop);
                                                     });           
                   
                   },function(){
                       
                $(this).find(".pic_box_tit").animate({top:btop});           
                    $(this).find(".pic_box_tit").css("top",btop);   
                       });


img.each(function(){
    
    var width=$(this).width;
var height=$(this).height;
    if(width>height){
    radio=width/maxwidth;
    img.css("width",maxwidth);
    height2=height*radio;
    img.css("height", height2);
    }                      
    else{
    radio=height/maxheight;
    img.css("height",maxheight);
    width2=width*radio;
    img.css("width", width2);
    }                  
         });

    
}          
          
          
})(jQuery);

 

posted on 2013-09-22 13:52  小V_chen  阅读(292)  评论(0)    收藏  举报

导航