`
inchinav5
  • 浏览: 1125 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

测试图片居中展示_新_3中情况

阅读更多
var imgCenterUi = {
			init : function(arg){
				var _rule = arg.rule || 1;
				var _isTrue = arg.isTrue || false;
				var thisImgHeight,thisImgWidth,parConHeight,parConWidth,scale,parscale = '';
				if(!_isTrue){
					var parObj = $('#'+arg.parId);
					var thisObj = parObj.find('img');
					policy(thisObj);
				}else{
					$('img').each(function(e) {
					  policy($(this));
                    });	
				}
				function policy(_thisObj){
					var _thisObj = _thisObj
					thisImgHeight = _thisObj.height();
					thisImgWidth = _thisObj.width();
					_thisObj.parent().css({'position':'relative','overflow':'hidden'});//此段应该在css里边早就设置过的
                    parConHeight = _thisObj.parent().height();
				    parConWidth = _thisObj.parent().width();
					parscale =  parConWidth/parConHeight;//计算容器宽度跟高度的比例
					scale =  thisImgWidth/thisImgHeight;//计算当前图片宽度跟高度的比例
					if(_rule == 1){
						imgCenterUi.bespread(thisImgHeight,thisImgWidth,parConHeight,parConWidth,scale,parscale,_thisObj);
					}
					if(_rule == 2){
						imgCenterUi.half_bespread(thisImgHeight,thisImgWidth,parConHeight,parConWidth,scale,parscale,_thisObj);
					}
					if(_rule == 3){
						imgCenterUi.centerImg(thisImgHeight,thisImgWidth,_thisObj);
					}
				}
			},
			/*
				@铺满
			*/
			bespread : function(thisImgHeight,thisImgWidth,parConHeight,parConWidth,scale,parscale,thisObj){
				var _thisObj = thisObj;
				if(scale > parscale){
					margLeft = thisImgWidth/(thisImgHeight/parConHeight);
					_thisObj.css({'height':parConHeight,'position':'relative','left':'50%','margin-left':'-'+margLeft/2+'px'});
				}else{
					margTop = thisImgHeight/(thisImgWidth/parConWidth);
					_thisObj.css({'width':parConWidth,'position':'relative','top':'50%','margin-top':'-'+ margTop/2 +'px'});
				}
				return false;
			},
			/*
				@一半铺满
			*/
			half_bespread : function(thisImgHeight,thisImgWidth,parConHeight,parConWidth,scale,parscale,thisObj){
				var _thisObj = thisObj;
				if(scale > parscale){
					margTop = thisImgHeight/(thisImgWidth/parConWidth);
					_thisObj.css({'width':parConWidth,'position':'relative','top':'50%','margin-top':'-'+ margTop/2 +'px'});
				}else{
					margLeft = thisImgWidth/(thisImgHeight/parConHeight);
					_thisObj.css({'height':parConHeight,'position':'relative','left':'50%','margin-left':'-'+margLeft/2+'px'});
				}
				return false;
			},
			/*
				@仅仅居中展示、多余的部分隐藏、隐藏的部分应该是在css里边就做好、设置超出父容器的部分隐藏就好
			*/
			centerImg : function(thisImgHeight,thisImgWidth,thisObj){
				var _thisObj = thisObj;
				_thisObj.css({'position':'absolute','left':'50%','top':'50%','margin-left':'-'+(thisImgWidth/2)+'px','margin-top':'-'+(thisImgHeight/2)+'px'});
				return false;
			}
	}
	$(function(){
		//需要两个参数、
		arg = {
				rule:'1',//1全屏铺满不变形 2.一面铺满不变形 3.保持原形居中展示
				isTrue:false,//是否对所有img进行统一设置
				parId:'img'//如果只对某一个img处理那么需要传入他父容器的ID 
			  };
		arg2 = {
				rule:'2',//1全屏铺满不变形 2.一面铺满不变形 3.保持原形居中展示
				isTrue:false,//是否对所有img进行统一设置
				parId:'img2'//如果只对某一个img处理那么需要传入他父容器的ID 
			  };
		arg3 = {
				rule:'3',//1全屏铺满不变形 2.一面铺满不变形 3.保持原形居中展示
				isTrue:false,//是否对所有img进行统一设置
				parId:'img3'//如果只对某一个img处理那么需要传入他父容器的ID 
		 	 };
		imgCenterUi.init(arg);
		imgCenterUi.init(arg2);
		imgCenterUi.init(arg3);
		
		/*
			如果需要将所有的图片都按照一种格式、如下:
			arg = {
				rule:'1',//1全屏铺满不变形 2.一面铺满不变形 3.保持原形居中展示
				isTrue:true
		    };
			 imgCenterUi.init(arg);
		*/
	});

 

分享到:
评论

相关推荐

    JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】

    本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    007sair#Reference#低版本ios的图片展示问题1

    背景在某些ios版本(8.3-10.3)的系统中,给图片设置垂直居中时图片会消失。代码如下:经过测试,发现其外层容器宽高仍然存在,但图片就是不显示。解决方案既然

    Android分享微信小程序技巧之图片优化

    前言 小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,...于是小菜决定重新用 Canvas 绘制一张图,将所要展示的图片居中展示,整理方法如下:

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...

    程序天下:JavaScript实例自学手册

    15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...

    使用div+css开发个人网站毕业设计.doc

    11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE文本产生3象素的bug 12 七、...

    Helpless Steam Tools-crx插件

    语言:English 这个extansion将帮助您查看Steam上的艺术品,通常没有正确地显示和其他... - [Center InfoBox]在您的个人资料编辑页面上的每个展示盒中显示了中心线,因此您可以更轻松地居中文本。 感谢您的测试:D </ P>

    行业贸易商务门户网站系统正式版

    企业logo,企业形象图片,企业简介,企业版权信息,企业名称,商机列表,产品展示(产品中心上下翻页图片展示,首页滚动显示图片),产品分类(企业产品自助分类),企业新闻列表,企业联系方式,企业招聘信息,客户...

Global site tag (gtag.js) - Google Analytics