`
inchinav5
  • 浏览: 1202 次
  • 性别: 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);
		*/
	});

 

分享到:
评论

相关推荐

    html图片居中图片列表左右切换可放大展示特效

    2. CSS 居中布局:图片居中展示是通过CSS实现的。一种常见方法是使用Flexbox布局。我们可以将容器设置为`display: flex; justify-content: center; align-items: center;`,使得图片在水平和垂直方向上居中。另一种...

    VMiddleImg图片居中裁切效果.zip

    在"VMiddleImg图片居中裁切效果"中,核心思想是利用CSS和JavaScript来实现动态的图片居中裁剪。CSS通常用于设置基本的布局和样式,如设置图片容器的宽高比,使其与图片原始比例匹配,以防止变形。同时,CSS可以隐藏...

    图片的水平垂直居中

    首先,让我们了解基本的CSS布局属性,它们对于实现图片居中至关重要。`margin: auto` 是一种简单的方法,适用于水平居中。当应用于具有固定宽度的元素(如图片)时,这个属性会自动分配左右外边距,使元素在其父容器...

    朋友圈长图居中展示.zip

    在微信朋友圈中,发布长图时,用户往往希望图片能够居中展示,以提供更好的视觉效果。本项目“朋友圈长图居中展示”正是针对这一需求而设计的。通过提供的压缩包文件,我们可以看到实现这一功能涉及到了HTML、...

    层固定,图片自动大小且居中

    在这种情况下,我们希望图片能够自适应容器大小,并且居中展示,以保持页面的美观和一致性。"层固定,图片自动大小且居中"是一个常见的布局需求,主要涉及CSS(Cascading Style Sheets)中的图像样式控制。下面将...

    分别利用css和js来使div中的图片居中

    在网页设计中,让图片居中是常见的布局需求。这篇博文主要探讨了如何通过CSS(层叠样式表)和JavaScript来实现div内图片的居中显示。以下将详细讲解这两种方法。 首先,我们来了解CSS居中技术。CSS提供了多种方式使...

    在网页中居中的若干种方法(至少6种,已经标明了对应浏览器,希望对你有用哦~)

    网页布局是网页设计的核心部分,尤其对于元素的居中对齐,它直接影响着网页的视觉效果和用户体验。本文将详细讲解在网页中实现...记得在实际应用中测试浏览器兼容性和性能,确保在各种设备和平台上的表现都能达到预期。

    halcon 缩放显示 C++类

    - `TestDisplayDlgDll` 可能是一个测试工程,用于演示如何使用这个DLL类,通常会包含一个对话框(Dialog)示例,展示如何调用类的方法来实现缩放显示功能。 - `lib` 文件夹可能存放库文件,如静态库或动态库,供其他...

    VMiddleImg图片居中裁切效果特效代码

    【VMiddleImg图片居中裁切效果特效代码】是一种在网页设计中实现图片居中裁剪的技术,主要用于解决图片在不同尺寸的设备上显示时,能够保持关键内容居中且完整展示的问题。这一技术通常结合CSS3和JavaScript来实现,...

    用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法

    在这个例子中,`<input>`文本框和`<img>`图片都被设置为垂直居中。由于内联元素之间可能存在间隙,我们可以通过添加一个内联元素(在这里是`<span>`)来调整元素之间的距离,使其看起来更加美观。 需要注意的是,...

    超宽屏焦点图居中兼容各浏览器js效果

    同时,为了使图片居中,可以设置容器的`left`属性为负值的一半,等于图片总宽度减去视口宽度除以2。 ```javascript var container = document.querySelector('.focus-container'); var imgs = Array.from...

    JQuery弹出恒定居中的窗口

    3. `index.htm`:可能是示例或测试页面,用于展示插件如何与HTML页面集成并正确运行。 4. `child.htm`:这可能是弹出窗口内加载的内容页面,显示在弹出框内供用户查看或交互。 5. `jquery-1.6.4.min.js`:这是jQuery...

    jQuery实现的商品图片轮播滚动展示效果源码.zip

    3. CSS样式:为了实现滚动展示效果,需要对图片容器、图片、箭头和导航点进行适当的CSS样式设置。例如,可以设置容器的宽度为一个图片的宽度,使用绝对定位使箭头和导航点相对于容器居中,以及隐藏超出容器的部分...

    autoScale:图片自动缩放平铺居中插件

    3. **图片居中**:在HTML和CSS中,可以通过设置`margin: auto`或者使用Flexbox或Grid布局来实现元素的水平居中。这个插件可能利用了这些技术来确保图片在缩放后仍然居中。 4. **图片平铺**:平铺是指让图片在容器内...

    xml调用的flash图片相册

    在Flash中,通过解析XML文件,可以动态加载和控制图片的展示,为用户带来更丰富的交互体验。 本教程对于初学者非常友好,能够帮助他们快速理解如何将XML与Flash ActionScript 3.0结合,创建一个灵活、可扩展的图片...

    Android高仿微信朋友圈图片查看,可放大,左右滑动

    在Android开发中,实现类似微信朋友圈的图片查看功能是一项常见的需求。这个功能允许用户点击图片后进入一个全屏模式,可以放大、缩小图片,并通过左右滑动切换到其他图片。以下将详细介绍如何实现这一功能。 首先...

    带有人脸位置感知的 UIImageView,更好的展示用户头像.zip

    例如,如果一个头像图片中的人物偏移到了一侧,普通的UIImageView可能会裁剪掉部分脸部,但使用了这个扩展的UIImageView,它可以自动调整显示,使得人物的脸部始终居中并完整显示。这不仅可以提升用户体验,也能避免...

Global site tag (gtag.js) - Google Analytics