一、案例介紹

Hello，大家好。今天和大家分享一個小案例。該案例來自于小米官網下小米電視部分（https://www.mi.com/mitv4/49/），效果如圖所式。

通過拖動滾動軸，可以查看滾動軸左右兩側不同清晰度的圖片對比。并且當我們將瀏覽器窗口縮小時，圖片左右邊側超出窗口部分會被移出，大家可以自己縮小窗口試試。
提醒：顯示器寬度分辨率為1920 px時，最能展示頁面效果哦。

二、案例特點以及所學知識

這個案例對HTML、以及JS相關技能不要求太多，但是對于不擅長布局的同學可能會覺得有些麻煩。可能存在兩個主要困惑：

①當瀏覽器窗口的寬度變小時，圖片仿佛不斷地從兩側移出消失，而當窗口寬度小到一定程度時，圖片將不再移動，超出窗口部分被截掉。

②高清4k圖與非高清4k圖如何完全重疊，而非高清4k圖卻只顯示一半的。

在本案例中，你將學習到絕對/相對定位以及max-width屬性相關知識。

三、案例實現

實現原理：

這個案例效果實現原理，實際上是存在兩張圖片。一張圖片是高清4k圖片，另一張圖片是非高清圖片。非高清圖片覆蓋在4k圖片

之上，通過滾動軸控制上層非高清圖片的寬度。被覆蓋區域顯示非高清圖片，而未被覆蓋區域則顯示底層的4k高清圖。因此，我們

所要做的，就是實現兩張不同清晰度圖片完全重疊，并通過滾動軸來控制非高清圖片的顯示范圍。

我們首先來寫一下案例的結構。注意，此時是完全不需要考慮CSS和JS的內容的，案例需要哪些內容，我們就寫哪些內容。案例需要兩張不同清晰度的圖片，以及一條滾動軸，滾動軸上有灰白兩色圓球，圓球左右兩側有文字說明。據此，寫出html結構。

HTML :

<img src="xxxxxx" alt="4k" /><!-- 4k高清圖 --> <img src="xxxxxx" alt="no-4k" /><!-- 非高清圖 --> <ul><li>優化前</li><li>優化后</li> </ul>

注意 : HTML代碼中圖片的鏈接地址，大家可以下載附件后自己填寫

說明 : 大家可以看到，上述HTML結構是非常簡單的。這就是案例的主要內容，至于這些內容該如何展示，如何定位，那將是CSS所要完成的工作，此時可以完全不需要考慮。
同時，大家也一定發現，在上述HTML中怎么沒有滾動軸的代碼呢？實際上，無論是滾動軸還是黑白小球，都完全是用CSS來實現的，無非是設置填充色、圓角這些屬性，其本質是不含任何內容的。因此，這些內容應該在寫CSS、考慮頁面布局等情況時再加入進來。大家可以先查看下此時頁面的效果圖。

思考: 上述HTML中采用img標簽來放置圖片，能否采用背景圖形式來展示呢？

制作滾動軸

滾動軸是一個相對獨立的部分。實際上，一條垂直白線，只是一個空div，只不過該div的寬度很小，只有1 px。此時填充背景色時，則顯示為一條直線。灰白小球同理。這部分內容未提前寫在HTML結構中，還有一個重要原因，那就是層級關系。雖然說，我們在寫HTML時不考慮CSS的樣式和布局，不會添加沒有語義的空div，但是錯誤的HTML層級關系，會對CSS編寫造成很大影響。比如說，一條垂直白線的空div，該放在上述HTML結構的哪部分呢？它是包裹ul，還是作為body元素的直接子元素呢？這些問題在不考慮CSS布局時，是完全沒法回答的，因此，這也是一個未將滾動軸提前寫入HTML結構中的一個原因。當然，對于簡單布局，大家完全可以在編寫HTML時將其布局結構一起考慮。
觀察滾動軸部分，很明顯，灰白小球以及文字說明都是相對于白色垂直線進行中心定位的。因此，作為白色垂直線的div要作為灰白小球以及文字的父元素，這樣層級關系就確定下來了，修改上述HTML結構。
修改后HTML :

<img src="xxxxxx" alt="4k" /><!-- 4k高清圖 --> <img src="xxxxxx" alt="no-4k" /><!-- 非高清圖 --> <div id="axis"><!-- 滾動軸 --><ul><li>優化前</li><li>優化后</li></ul><div id="WHITE"></div><!-- 白色小球 --><div id="gray"></div><!-- 灰色小球 --> </div>

這樣，所有HTML部分代碼就完成了。當然，這里所說的‘所有’，應當是加引號的，僅僅是只案例所需要的所有內容都具備了。當后續寫CSS時，如若需要空白的div，仍然需要修改HTML的，但那時，僅僅是多了一些包裹層，大體結構是不變的。
思考 : 我們一開始說，寫HTML不需要考慮CSS。但后來添加滾動軸部分代碼時，又考慮了CSS布局結構，確定了層級關系才寫的HTML部分。請大家好好體會其中差別，什么時候考慮，什么時候不考慮。

CSS ：
我們首先完成滾動軸部分的CSS。前面說了，白色垂線作為定位元素，因此需要將其position屬性設置為relative。

#axis{position:relative;width:1px;height:590px;background-color:white; } #axis ul,#WHITE,#gray{position:absolute;top:50%;left:50%; } #axis ul{width:300px;margin-left:-83px; } #axis ul li{display:inline;padding-right:50px;color:white; } #WHITE{width:20px;height:20px;border-radius:20px;background-color:white;margin-top:-10px;margin-left:-10px;z-index:20; } #gray{width:28px;height:28px;border-radius:28px;background-color:gray;margin-top:-14px;margin-left:-14px;z-index:10; }

說明 : 一口氣寫了這么多，大家一定有些問題。我將個人認為需要講解的問題在此一一為大家解答。
①#axis設置width:1px可以理解，為什么設置590px呢？這個590是從哪來的？
答：590px是圖片的高度，因此設置為590。另外，大家需要注意的是，我們一般不定義元素的高度，因為如果把高度寫死了，就不容易拓展新內容了。但這里，顯然是需要設置高度的，大家要有此意識。
②#axis ul中寬度300與左外邊距-83是如何確定的？
答：是試出來的。300完全可以換成其他數值。至于margin-left,大家可以通過調試工具，看偏移量是多少時文字能在軸兩側對稱分布。同理，#axis ul li中padding-right的數值也是可以改變的，只要實現文字兩邊對稱顯示即可。
③#WHITE與#gray中都設置了margin-top和margin-left為負值，什么意思？
答：這個比較簡單，是居中對其。我們設置了left和top為50%，是指元素的左上角距離父元素左、上的距離為父元素寬、高的50%，而沒有考慮元素本身的寬高。因此通過margin-left設置為元素自身寬度的一半、margin-top設置為元素自身高度的一半來實現元素中心點處于父元素的中心點位置。
④設置z-index是什么意思？
答：所有絕對定位的元素，都會有該屬性，用來決定z軸的高低關系。白色小球將灰色小球覆蓋，因此白色小球的z-index較高，至于具體數值，大家隨便取即可。
注意 : 設置了absolute后，一定要養成良好習慣，寫left和top的值，即使有時你不寫好像也沒任何問題。

盒子模型
這里不是要講解什么內外邊距，啥東西。而是說，實現該案例，我們先建立一個盒模型演示一下。
前面也說了，瀏覽器窗口較大時，圖片居中顯示。而當瀏覽器寬度變小時，圖片左右兩側漸漸消失，且圖片始終居中。當寬度小于一定值時，圖片位置不再變動，右側圖片被截掉。大家想想這樣的效果是如何實現的。
我們這樣思考。
首先，圖片的位置是隨著瀏覽器窗口大小改變而發生變化的，且圖片左右外邊距為0時其位置仍然隨著窗口大小發生變化（也就是說，并不是設置margin：0 auto實現的圖片位置隨窗口大小改變而變化。）因此，圖片一定是設置了絕對定位，始終定位在瀏覽器窗口的中心處。

img{position:absolute;left:50%;top:0;margin-left:-900px; }

然后，圖片是相對誰定位的，是相對于body（即瀏覽器窗口）嗎？實際上，這里真可以相對于body進行定位。當body寬度大于圖片寬度（1800px）時，圖片居中顯示，左右兩側距離瀏覽器窗口有一定距離。當body寬度小于圖片寬度時，圖片仍然居中顯示，且由于居中顯示，圖片左右兩側處于瀏覽器窗口外的部分自然就消失了。示意如圖：

為了讓超出瀏覽器窗口兩側的圖片內容消失，需要使用overflow屬性。注意，對瀏覽器窗口寫該屬性時，正確的寫法是：

html,body{overflow-x:hidden;}

而不是只寫body{overflow-x:hidden;}
最后，當窗口再小時，圖片位置不發生改變。這說明，雖然窗口通過光標拉窄了，但body元素的寬度并沒有發生變化，因此圖片位置也不會發生變化（圖片始終居中body元素，body元素的大小沒有發生變化，圖片的位置自然也不會改變。）
所以，需要給body元素設置一個寬度。直接設置width可以嗎？顯然是不可以的，因為如果設置了width固定值，那么圖片從一開始就不會發生位置變化。那怎樣才能一開始body元素寬度能變，后來又不能變呢？很簡單，使用min-width屬性。也就是說，body元素寬度小到一定程度時，將不再發生變化。這就解決了我們的問題了。

body{min-width:1200px; }

現在還有一個問題，目前，兩張圖片是完全重疊的。而我們希望的是非高清圖片只顯示一半寬度。可是，當我們設置非高清圖片的width屬性為一半即900px時，卻發現圖片的高度也隨之縮小了，這顯然不是我們要的。如果我們設置height：590px，并不能實現圖片裁剪，實際上會造成圖片拉伸變形。
該怎么解決這個問題呢？實際上很簡單，我們只需要為非高清圖像加一個容器，通過控制容器的寬度，來實現裁剪圖片的功能。圖片仍然是完整顯示，但由于容器寬度只有900px，所以超出容器部分的圖片自然就不能顯示了。因此需要在非高清圖外加一個容器。
添加容器后的HTML :

<img src="xxxxxx" alt="4k" class="firstImg"/><!-- 4k高清圖 --> <div id="wrap"><div id="inner"><img src="xxxxxx" alt="no-4k" class="secondImg"/><!-- 非高清圖 --></div> </div> <div id="axis"><!-- 滾動軸 --><ul><li>優化前</li><li>優化后</li></ul><div id="WHITE"></div><!-- 白色小球 --><div id="gray"></div><!-- 灰色小球 --> </div>

需要將容器設置為圖片大小，并且也絕對定位始終在瀏覽器窗口居中顯示。此時，原先對img元素設置的絕對定位，就可改成只對第一張圖片絕對定位即可，第二張非高清圖就不需要絕對定位了。

#wrap{width:1800px;height:590px;position:absolute;left:50%;top:0;margin-left:-900px; } #inner{width:900px;overflow:hidden; }

此時，當改變#inner的width值時，就能控制非高清圖覆蓋的區域了。
將滾軸定位到圖片中間
目前，圖片部分已經完成。滾動軸模塊已經實現，但還未進行定位。顯然，滾動軸需要始終在圖片中間，需要以圖片作為定位元素。而圖片img元素本身是行級inline元素，不能作為父級。可是，剛剛我們寫的#warp元素，它完全和圖片是重疊的，因此以#wrap元素定位，和以圖片元素定位是完全一樣的，因此我們需要將滾動軸部分HTML結構放在#wrap下面。
將滾動軸放在#wrap元素下面的HTML :

<img src="xxxxxx" alt="4k" class="firstImg"/><!-- 4k高清圖 --> <div id="wrap"><div id="inner"><img src="xxxxxx" alt="no-4k" class="secondImg"/><!-- 非高清圖 --><div id="axis"><!-- 滾動軸 --><ul><li>優化前</li><li>優化后</li></ul><div id="WHITE"></div><!-- 白色小球 --><div id="gray"></div><!-- 灰色小球 --></div></div> </div>

注意，原本我們為#axis設置為相對定位，現在也需要修改成絕對定位。#axis修改成絕對定位，完全不會對其子元素定位結果造成任何影響。

#axis{position:absolute;width:1px;height:590px;background-color:white;left: 50%;top:0; }

好了，到目前位置所有HTML和CSS部分代碼就實現了，下面就是實現JS拖拽滾動軸改變#inner的width值了。
未完待續….明天繼續

總結

以上是生活随笔為你收集整理的小米电视不同清晰度图片对比效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。