<!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);