满横屏（full-x-width）图片展现效果

时间 2019-12-26

标签 width 图片展现效果繁體版

原文原文链接

前言

满横屏（full-x-width）是常常见到的效果。所谓满横屏，即指不管是在多大的显示屏上，图片都将占满整行。javascript

实际上，满横屏效果是很容易实现的，咱们只需用一个块级元素包裹住img元素，而后将img的width值设置为100%便可。css

所以，咱们这里将讨论图片满屏（full-client），即图片在整个页面窗口所有显示。满屏至关于满横屏（full-x-width）和满高屏（full-y-height）的结合。html

这里你们想一下，若是要实现不管多大的屏幕，或多小的屏幕，图片都占满整个显示窗口，则必然图片会进行缩小或放大。既然要缩放，就必须得考虑一个问题：同比例缩放。显然，图片是不容许被拉伸的，一旦拉伸则会产生变形。所以，图片满屏显示首先要明确的是，图片必定要缩放，图片比例必定不能改变。java

如何实现图片比例不变呢？使用img元素能够实现吗？动画

使用img元素很难实现各个屏幕下同比例缩放。url

你们想一下，除非显示窗口的尺寸比例正好和图片宽高比例相同，图片进行放大缩小时，才能同比例占满整个屏幕。spa

假设图片大小是800*600，显示窗口尺寸是1300*800，则图片是不能同比例正好覆盖显示窗口的。若是将图片同比放大到最小能覆盖显示窗口的尺寸，而后让图片居中显示，超出窗口部分截掉，却是能够。但显然，使用img元素肯定放大比例，而后居中等操做是很麻烦的。code

因此，咱们这里使用背景图来实现满屏显示。orm

注意：通常状况下，咱们既可使用img展现图片，也能够经过背景图展现。但满横屏这种状况，咱们建议使用背景图展现图片，方便。htm

background有不少设置能够方便地解决咱们刚才提出的问题，好比，刚好放大到最小能覆盖显示窗口的尺寸，能够经过background-size：cover来实现；图片居中能够经过background-position：center来实现。

HTML

<body>
    <div class="img img1">
			
    </div>
	<div class="img img2">
					
	</div>
	<div class="img img3">
					
	</div>
	<div class="img img4">
			
	</div>
</body>

每个div都是用来放置背景图的，一个有4个背景图。因为除了展现具体的图片不一样，其他都相同，因此设置了img类，又为每个图片单独设一个类。

CSS

*{
margin:0;
padding:0;
}
html,body,.img{
height:100%;
}
html,body{
overflow:hidden;
}
.img{
background-size:cover;
background-position:center center;
}
.img1{
background-image:url("图片的地址");
}
.img2{
background-image:url("图片的地址");
}
.img3{
background-image:url("图片的地址");
}
.img4{
background-image:url("图片的地址");
}

这里有几点须要注意的：

第一，咱们给html,body, .img都设置了height为100%。由于背景图不占空间，因此当咱们在div中只设置了背景图时，div的高度是0。这样的话就没法显示背景图片了。所以，咱们须要给.img的div元素设置高度为100%，即占满整个显示窗口的高度。但因为该100%是以.img的父元素body的高度计算的，而body元素的高度也是0，所以也须要给body设置高度100%，同理html也须要设置。

第二，设置overflow：hidden。设置完咱们就只能看到一张图片了，但好处是显示页面彻底是图片，而没有滚动轴。这就是满屏图片效果。下面咱们能够经过js实现查看剩余图片。

JS

咱们经过JS来查看剩余未显示的图片，经过点击页面查看下一张图片。这里，图片动画部分用到CSS3的transition和transform属性。

首先想一下实现原理，当点击页面时，4幅图都应该向上移动一个显示窗口的高度，再次点击时，再次上移一个高度。因为4幅图是一块儿移动的，所以咱们须要给4幅图包裹一个父div，只须要移动父div，4幅图就一块儿移动了。

添加父div给4幅图的HTML

<body>
  <div id="wrap">
      <div class="img img1">
			
      </div>
	  <div class="img img2">
					
      </div>
	  <div class="img img3">
					
	  </div>
	  <div class="img img4">
			
	  </div>
  </div>
</body>

因为#wrap能够移动，因此咱们必须将其设置成绝对或相对定位。这里固然是选择相对定位，同时，为了让其移动产生动画效果，咱们添加transition属性。

为#wrap添加CSS

#wrap{
    height:100%;
    position:relative;
    transition:all ease-in-out 500ms;
}

在写JS程序前，咱们先理一下代码逻辑：

点击第一下时，图片向上移动显示窗口高度*1

点击第二下时，图片向上移动显示窗口高度*2

点击第三下时，图片向上移动显示窗口高度*3

点击第四下时，图片向上移动显示窗口高度*0

由于咱们只有4幅图，所以最多只能点击三下，就必须将其拉回到原始位置。不失通常性，加入咱们有n张图，则咱们最多只能点击n-1次，第n次点击时就须要回到原处了。

所以，为了程序的拓展性，咱们在写代码时，不能只对4张图拿来写，之后‘4’这个数字彻底可能改变，咱们不能每次改变都去改代码，这样灵活性就太差了。

逻辑：首先获取有几张图片记为num，且获取显示窗口的高度。设置一个变量a，默认值为1，每次点击咱们都判断，若变量a大于等于num，说明已是最后一张图了。则令num为0。而后用显示窗口高度乘以变量a做为移动距离，移动后令a加1，做为下次移动距离。

JS代码

<script>
    var a = $('body').css('height');//获取显示窗口高度
    var num = null;//图片数量
    $('.img').each(function(){
        num++;//有几个.img，num就加几回
    })
    var num2 = 1;//须要乘的系数，后面变成1,2,3...
    $('body').click(function(){
        if(num2>=num)//说明是最后一张图片了
             num2 = 0;
        $("#wrap").css('transform','translateY('+(-a*num2)+')px');
        num2++;
    })
</script>

其中，改变transform的值时，用了字符串链接，只有中间的具体数字是计算的，其余都是字符串，注意别忘加px，不然是显示不出来的。

好了，就这么多了，谢谢你们。