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

最新推荐文章于 2024-08-18 10:54:05 发布

weixin_30315723

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangzf-No1/p/3414701.html

版权

最近在做一个项目，
大量的图片基于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

转载于:https://www.cnblogs.com/wangzf-No1/p/3414701.html

weixin_30315723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jq图片居中插件 [center]

最近在做一个项目，大量的图片基于js进行缩放（图片放大镜），考虑用css要写许多hack，而已经基于jq了，干脆写个方法得了。代码很简单，不用多讲但是很实用。$.fn.extend({ center: function (n,b) { n=typeof n?n:300;//过渡时间，默认为300毫秒;Number类型; b=b===false?b:true;/...
复制链接

扫一扫