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

最新推荐文章于 2021-08-20 14:51:03 发布

weixin_33877885

最新推荐文章于 2021-08-20 14:51:03 发布

阅读量1k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3618644/blog/1477181

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

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

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

因此，我们这里将讨论图片满屏（full-client），即图片在整个页面窗口全部显示。满屏相当于满横屏（full-x-width）和满高屏（full-y-height）的结合。

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

如何实现图片比例不变呢？使用img元素可以实现吗？

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

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

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

所以，我们这里使用背景图来实现满屏显示。

注意：一般情况下，我们既可以使用img展示图片，也可以通过背景图展示。但满横屏这种情况，我们建议使用背景图展示图片，方便。

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，否则是显示不出来的。

好了，就这么多了，谢谢大家。

转载于:https://my.oschina.net/u/3618644/blog/1477181