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

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

代码很简单，不用多讲但是很实用。

$.fn.extend({ center: function (n,b) {

		n=typeof n?n:300;//过渡时间，默认为300毫秒;Number类型;

		b=b===false?b: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>wangzf.com</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://wangzf.com">wangzf.com</a>

</body>

</html>

<script src="http://code.jquery.com/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>

王那个锋啊的个人博客 wangzf.com

秒客网

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

相关文章