滿橫屏（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，不然是顯示不出來的。

好了，就這麼多了，謝謝你們。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。