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实现显示带倒影的图片横排居中放大展示功能。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
背景在某些ios版本(8.3-10.3)的系统中,给图片设置垂直居中时图片会消失。代码如下:经过测试,发现其外层容器宽高仍然存在,但图片就是不显示。解决方案既然
前言 小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,...于是小菜决定重新用 Canvas 绘制一张图,将所要展示的图片居中展示,整理方法如下:
实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...
实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...
15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...
15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...
11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE文本产生3象素的bug 12 七、...
语言:English 这个extansion将帮助您查看Steam上的艺术品,通常没有正确地显示和其他... - [Center InfoBox]在您的个人资料编辑页面上的每个展示盒中显示了中心线,因此您可以更轻松地居中文本。 感谢您的测试:D </ P>
企业logo,企业形象图片,企业简介,企业版权信息,企业名称,商机列表,产品展示(产品中心上下翻页图片展示,首页滚动显示图片),产品分类(企业产品自助分类),企业新闻列表,企业联系方式,企业招聘信息,客户...