<!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);
转载于:https://www.cnblogs.com/vania/p/3332977.html
相关资源：数据结构—成绩单生成器
