最近在做一个项目，
大量的图片基于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]的更多相关文章
	

    
								
  1. jq图片展示插件highslide.js简单dom
		
    今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了. 那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下. 一.引入   首先 ...
    
		
    2. 
						
  2. 基于jQuery图片元素网格布局插件
		
    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...
    
		
    3. 
						
  3. 一款基于jQuery可放大预览的图片滑块插件
		
    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...
    
		
    4. 
						
  4. Aps.net中基于bootstrapt图片上传插件的应用
		
    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...
    
		
    5. 
						
  5. 基于jQuery功能非常强大的图片裁剪插件
		
    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
    
		
    6. 
						
  6. 基于jq流畅度非常好的图片左右切换焦点图
		
    今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...
    
		
    7. 
						
  7. 封装基于jq弹窗插件
		
    相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...
    
		
    8. 
						
  8. JQZoom 图片放大插件的使用
		
    QZoom是一个基于最流行的jQuery的图片放大器插件.它功能强大,使用简便.支持标准模式.反转模式.无镜头.无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果,修正IE6的select b ...
    
		
    9. 
						
  9. 基于JQ的自定义弹窗组件
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. RHEL6彻底禁用ip6的方法
			
    一.vi  /etc/modprobe.d/disable-ipv6.conf(名字随便起)(RHEL6.0之后没有了/etc/modprobe.conf这个文件) 输入:install ipv6 / ...
    
			
    2. 
						
  2. JS中多个onload冲突解决办法
			
    一  多个window.onload冲突 在一个页面中有两个JavaScript 分别都用到了window.onload一个是:window.onload=externallinks,另一个是:win ...
    
			
    3. 
						
  3. 395. Coins in a Line II
			
    最后更新 这个题做得也不好,dp[n]尝试写了几下,不太对. 应该是类似于gem theory的题. 当只有1个硬币剩下的时候直接拿走,不BB. 剩俩的时候也都拿了.. dp[n]表示剩下多少个硬币. ...
    
			
    4. 
						
  4. (int),Convert.ToInt32(),Int32.Parse(),Int32.TryParsed()的用法总结
			
    1 (int) 强制转型为整型. 当将long,float,double,decimal等类型转换成int类型时可采用这种方式. double dblNum = 20; int intDblNum = ...
    
			
    5. 
						
  5. 遮罩层的实现(纯js兼容版)
			
    这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和scree ...
    
			
    6. 
						
  6. 子窗体与父窗体传值操作的js示例
			
    //返回值给父窗体 function returnParent(value) {//获取子窗体返回值    var parent = window.dialogArguments; //获取父页面   ...
    
			
    7. 
						
  7. devm_kzalloc and kmalloc
			
    Move resources allocated using unmanaged interface to managed devm interface So today let's talk abo ...
    
			
    8. 
						
  8. BMVC reading list
			
    'Combining Local and Global Cues for Closed Contour Extraction' Vida Movahedi, James Elder 'FRIF: Fa ...
    
			
    9. 
						
  9. HTML5到底能给企业带来些什么？
			
    一.改变企业网络广告的模式与分布 广告是企业网络营销的主要方式之一.十几年来,无论是展示还是互动,基本被Adobe Flash所主宰.然而,HTML5网页的多媒体特性.三维.图形及特效,超炫的浏览体验 ...
    
			
    10. 
						
  10. 源泉书签，助您管理海量收藏。www.yuanquanshuqian.com，今日更新：多标签功能已实现
			
    源泉书签.助您管理海量收藏.www.yuanquanshuqian.com,今日更新:多标签功能已实现
    
			
    11.