技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
图片永远塞满框框+js +jquery--------原创
Eg案例说明:
链接：
http://www.6yang.net/myjavascriptlib/thumbnail/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片永远塞满加框框+js +jquery--------原创</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
li{
list-style:none;
}
.picWrap li{
float:left;
padding:0 5px 0 0;
}
.picWrap li p{
text-align:center;
}
.picWrap li .item{
background:#fff;
border:1px solid #ccc;
height:85px;
width:140px;
overflow:hidden;
position:relative;
}
.picWrap li .item a{
display:block;
font-size:0;
left:0;
top:0;
position:absolute;
}
</style>
<script type="text/javascript" language="JavaScript">
(function($){
$.fn.showPanelCenter = function(){
this.each(function(){
var coorX = ($(this).closest("div").width() - $(this).width())/2;
var coorY = ($(this).closest("div").height() - $(this).height())/2;
$(this).showPanelPosition(coorX, coorY);
});
return this;
};
//show panels in position
$.fn.showPanelPosition = function(x, y){
this.each(function(){
$(this)
.css({
"left": x,
"top": y
})
.show();
});
return this;
};
})(jQuery);
jQuery(function($){
$("#picList .item").find("img").each(function(){
self = $(this);
if(self.width() < 140 || self.width() > 200){
self.width(140);
}else if(self.height() < 85){
self.height(85);
}
self.closest("a").showPanelCenter();
});
});
</script>
</head>
<body>
<div class="picWrap">
<ul id="picList">
<li><div class="item"><a href="#"><img src="pic-post04.jpg" alt="" border="0"/></a></div><p>大图(太宽)</p></li>
<li><div class="item"><a href="#"><img src="pic-gamevideo03.jpg" alt="" border="0" /></a></div><p>大图(太高)</p></li>
<li><div class="item"><a href="#"><img src="pic-post033.jpg" alt="" border="0"/></a></div><p>大图(太宽太高)</p></li>
<li><div class="item"><a href="#"><img src="pic-post034.jpg" alt="" border="0"/></a></div><p>大图(太小)</p></li>
</ul>
</div>
</body>
</html>