最近在做一个项目，
大量的图片基于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. 【解决】小米M1刷机教程（卡刷）
			
    1.下载合适的rom 下载地址为:http://rom.xiaomi.cn/ 选择合适的机型.硬件版本.固件类.软件版本后,点击“搜索”后,下载合适版本即可. 2.备份 个人手机主要需要备份的项目如下 ...
    
			
    2. 
						
  2. git push 报错
			
    git push报错误: Git push error: RPC failed; result=56, HTTP code = 200 fatal: The remote end hung up un ...
    
			
    3. 
						
  3. JavaScript- 省市联动代码
			
    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
    
			
    4. 
						
  4. 在JSP页面中调用另一个JSP页面中的变量
			
    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...
    
			
    5. 
						
  5. try与finally返回结果执行先后详解
			
    先看一段代码: @Test public void test1(){ System.out.println(testf1()); } int testf1() { int x = 1; try { r ...
    
			
    6. 
						
  6. Winfrom 如何安全简单的跨线程更新控件
			
    来源:http://www.cnblogs.com/rainbowzc/archive/2010/09/29/1838788.html 由于多线程可能导致对控件访问的不一致,导致出现问题.C#中默认是 ...
    
			
    7. 
						
  7. MFC ListControl使用方法
			
    在原来博客中有:MF CListControl 简单功能使用 推荐文章:MFC类CtrlList用法 今天又又一次来介绍点新东西:双击击listcontrol  做出响应.当然你能够做的还有非常多,比 ...
    
			
    8. 
						
  8. C# richTextBox编辑器
			
    附件:http://files.cnblogs.com/xe2011/CSHARP_RichTextBoxEditor.rar 完整的转到这里 http://www.cnblogs.com/xe201 ...
    
			
    9. 
						
  9. [Javascript] MetaProgramming: new.target
			
    new.target is a new “magical” value available in all functions, thoughin normal functions it will al ...
    
			
    10. 
						
  10. [TypeScript] Understanding Decorators
			
    Decorators are a feature of TypeScript that are becoming more and more common in many major librarie ...
    
			
    11.