最近在做一个项目，
大量的图片基于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. ubuntu下安装maven
			
    下载maven http://maven.apache.org/download.cgi 解压 tar -xzvf apache-maven-3.0.5-bin.tar.gz 配置环境变量 sudo  ...
    
			
    2. 
						
  2. 使用GitHub管理源代码
			
    作为一个开发员,源码的管理是一个头等大事来的,想象一下,修改完成却发现文件丢失了,该怎么办?有了源代码管理工具,能够帮助我们查看某个代码文件的修改内存及历史修改记录. 作为.Net开发员,我使用过VS ...
    
			
    3. 
						
  3. Stackdump: 一个可以离线看stackoverflow的工具
			
    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Stackdump: 一个可以离线看stackoverflow的工具.
    
			
    4. 
						
  4. FontCombobox 和FontSizeCombobox
			
    附件:http://files.cnblogs.com/xe2011/WindowsFormsFontCombox.rar 自定义组件字体组合框 自定义组件字体组合框如何使用 自定义组件字体大小组合框 ...
    
			
    5. 
						
  5. .h头文件 .lib库文件 .dll动态库文件之间的关系
			
    .h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的. 附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够 ...
    
			
    6. 
						
  6. hadoop错误Operation category READ is not supported in state standby
			
    报如下错误 解决方法: 方法一:(结果不起作用) 通过Shell命令方式,hadoop/bin/hdfs haadmin -failover --forceactive hadoop2 hadoop1 ...
    
			
    7. 
						
  7. C#随机函数random()典型用法集锦
			
    C#随机函数random()典型用法集锦 Random.Next() 返回非负随机数: Random.Next(Int) 返回一个小于所指定最大值的非负随机数 Random.Next(Int,Int) ...
    
			
    8. 
						
  8. WPF – 使用触发器
			
    WPF – 使用触发器 WPF提供了很重要的一个东西就是绑定Binding, 它帮助我们做了很多事情,这个我们在WPF学习之绑定这篇里边有讲过.对于Binding我们可以设置其绑定对象,关系,并通过某 ...
    
			
    9. 
						
  9. update  inner join
			
    string sql = @"update a set a.M_ParentID=b.M_ParentID, a.M_Name=b.M_Name, a.M_Seq=b.M_Seq from  ...
    
			
    10. 
						
  10. HTML+CSS基础学习笔记（2）
			
    一.无序列表标签ul <ul> <li>信息</li> <li>信息</li> ...... </ul> 代码解释:每项< ...
    
			
    11.