基于jq图片居中插件 [center]

昵称10504424 2013-11-18

展开全文

最近在做一个项目，
大量的图片基于js进行缩放（图片放大镜），
考虑用css要写许多hack，
而已经基于jq了，
干脆写个方法得了。

$.fn.extend({ center: function (n,b) {
n=typeof n?n:300;//过渡时间，默认为300毫秒;Number类型;
b=b===falseb:true;//铺满父容器;如果为真 则清除标签上的style样式、计算出缩放数据后、还原清楚的样式后、按照缩放数据缩放，如果为假 则保持原尺寸（会出现图片显示不全现象）;Boolean类型;
$(this).each(function() {
var t=$(this),tP=t.parent();//获取相对缩放的父容器;
var tOld=t.attr("style");//存储当前样式;
b&&t.removeAttr("style");//清除当前样式;
var tH=t.height(),tW=t.width();//缩放对象宽，高;
var tPH=tP.height(),tPW=tP.width();//缩放对象父容器宽，高;
var scaleW=tH/tW,scaleH=tW/tH;//比例计算;
var pScaleW=tPH/tPW,pScaleH=tPW/tPH;//父容器比例计算;
var baseW=(pScaleW-scaleW)>(pScaleH-scaleH);//是否按照宽度进行缩放;
t.attr("style",tOld);//还原存储的样式;
var data={"width":tW,"height":tH,"opacity":1};//缩放效果数据（声明和原始数据）;
if((baseW&&b)){data.width=tPW; data.height=tPW*scaleW};//按照宽度进行缩放更改效果数据;
if((!baseW&&b)){data.height=tPH; data.width=tPH*scaleH};//按照高度进行缩放更改效果数据;
data["top"]=(tPH-data.height)/2; data["left"]=(tPW-data.width)/2;//计算位置;
t.css("opacity",0);
t.stop(true,true).animate(data,n);//实施效果参数;
})
}})

center插件在线调试

完整实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.item{ position:relative;
	   height:300px; width:300px; overflow:hidden; border:5px #ccc solid; float:left; margin:10px;}
.item img{ position:absolute;}
.item span{ position:absolute; top:50%;padding:20px; display:none; background:rgba(0,0,0,.5); color:#fff;}
.item:hover span{ display:block;}
</style>

</head>
<body>

<div class="item"><img src="http://f.hiphotos.baidu.com/album/w%3D2048/sign=5a4b7bd68326cffc692ab8b28d394b90/7af40ad162d9f2d3ba2229a0a8ec8a136327cc4a.jpg"><span></span></div>
<div class="item"><img src="http://d.hiphotos.baidu.com/pic/w%3D230/sign=3f65b6e61c950a7b753549c73ad0625c/0d338744ebf81a4c22620119d62a6059242da68a.jpg"><span></span></div>
<div class="item"><img src="http://h.hiphotos.baidu.com/pic/w%3D230/sign=d44f53508701a18bf0eb154cae2e0761/08f790529822720e536837867bcb0a46f21fab2c.jpg"><span></span></div>
<div class="item"><img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=3b73e8b90b55b3199cf9857673a88286/7af40ad162d9f2d3c39c8057a8ec8a136227ccfd.jpg"><span></span></div>
<br clear="all">
<a href="http://"></a>
</body>
</html>
<script src="http://code./jquery-2.0.3.min.js"></script>

<script>
$(function(){
	$.fn.extend({ center: function (n,b) {
		n=typeof n?n:300;b=b===false?b:true;
		$(this).each(function() {
			var t=$(this),tP=t.parent();
			var tOld=t.attr("style");b&&t.removeAttr("style");
			var tH=t.height(),tW=t.width();
			var tPH=tP.height(),tPW=tP.width();
			var scaleW=tH/tW,scaleH=tW/tH;
			var pScaleW=tPH/tPW,pScaleH=tPW/tPH;
			var baseW=(pScaleW-scaleW)>(pScaleH-scaleH);
			t.attr("style",tOld);
			var data={"width":tW,"height":tH,"opacity":1};
					if((baseW&&b)){data.width=tPW; data.height=tPW*scaleW};
					if((!baseW&&b)){data.height=tPH; data.width=tPH*scaleH};
				data["top"]=(tPH-data.height)/2; data["left"]=(tPW-data.width)/2;
				t.css("opacity",0);
				t.stop(true,true).animate(data,n);
		})}})
});
</script>
<script>
$(function(){
	$("img").each(function() {
        var t=$(this);
		t.next().html("设置前图片大小 宽*高= "+t.width()+"*"+t.height())
    });
	
	$("img").eq(0).center(300,false)
	$("img").eq(1).center()
	$("img").eq(2).center(300,false)
	$("img").eq(3).center()
	})
</script>

王那个锋啊的个人博客