最近在做一个项目，
大量的图片基于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. pgsql自动安装shell脚本整理
			
    前面不断在vm虚拟机上测试pgsql,发觉安装还是有些麻烦的. 所以就收集了一些 1,http://www.davidghedini.com/pg/entry/postgresql_9_5_scrip ...
    
			
    2. 
						
  2. DataGridView减少闪烁的解决办法
			
    Reducing flicker, blinking in DataGridView http://www.codeproject.com/Tips/390496/Reducing-flicker-b ...
    
			
    3. 
						
  3. [C#] 常用工具类——直接在浏览器输出数据
			
    /// <summary> /// <para> </para> /// 常用工具类——直接在浏览器输出数据 /// <para> ---------- ...
    
			
    4. 
						
  4. android 59   LinearLayout 线性布局
			
    ##常见的布局* LinearLayout 线性布局线性布局往左右拉是拉不动的,> 线性布局的朝向 vertical|horizontal> 线性布局的权重 weight 和 0dip一起 ...
    
			
    5. 
						
  5. WCF - 消息
			
    SOAP SOAP是Simple Object Access Protocol(简单对象访问协议)的简称 而如今SOAP已经成为了符合W3C制定的SOAP规范的消息 允许您使用 XML 在通过低层 I ...
    
			
    6. 
						
  6. android打包签名介绍
			
    Keytool 是一个有效的安全钥匙和证书的管理工具. Java 中的 keytool.exe (位于 JDK\Bin 目录下)可以用来创建数字证书,所有的数字证书是以一条一条(采用别名区别)的形式存 ...
    
			
    7. 
						
  7. 关于jquery获取服务器端xml数据
			
    其实这个很简单,但是有时候简单的东西会让你犯一些低级错误. 今天写了个spring mvc 的服务器端接口,主要是用来共享一些数据库数据. 请求字段:http://localhost:8080/XXX ...
    
			
    8. 
						
  8. (转)Spring读书笔记-----Spring核心机制：依赖注入
			
    Java应用(从applets的小范围到全套n层服务端企业应用)是一种典型的依赖型应用,它就是由一些互相适当地协作的对象构成的.因此,我们说这些对象间存在依赖关系.加入A组件调用了B组件的方法,我们就 ...
    
			
    9. 
						
  9. （ASP页面查询等待提示效果）GridViewなどで検索中に「処理中メッセージ」を表示する方法（※他の長い時間処理も参照できる）
			
    原博客 http://ino1970.blog119.fc2.com/blog-entry-163.html GridViewなどで検索中に「処理中メッセージ」を表示する方法 「GridViewなどで ...
    
			
    10. 
						
  10. [页面辅助] 最新的 PageValidate 类 （转载）
			
    代码 using System; using System.Data; using System.Configuration; using System.Web; using System.Text. ...
    
			
    11.