亚洲精品久久一区二区三区,亚洲伊人一本大道中文字幕

第3章小男孩的動(dòng)作的分解
編程：3-1 布局的自適應(yīng)動(dòng)態(tài)調(diào)整
編程：3-2 精靈動(dòng)畫的實(shí)現(xiàn)
編程：3-3 走路的實(shí)現(xiàn)
編程：3-4 運(yùn)動(dòng)的狀態(tài)控制
編程：3-5 路徑動(dòng)畫的處理

第8章背景音樂(lè)
編程：8-1 HTML5 audio

補(bǔ)充內(nèi)容雪碧圖的自適應(yīng)縮放

本節(jié)的內(nèi)容沒(méi)有在七夕主題效果中實(shí)現(xiàn)，這是一個(gè)額外的知識(shí)點(diǎn)，留給大家思考的一個(gè)問(wèn)題：雪碧圖如何做自適應(yīng)縮放？

本課程采用了CSS3的動(dòng)畫關(guān)鍵幀實(shí)現(xiàn)了精靈動(dòng)畫，所有的精靈圖都是通過(guò)合成的雪碧圖獲取的，這樣帶來(lái)了一個(gè)根本問(wèn)題：通過(guò)background-position獲取的圖片，正常情況下是無(wú)法縮放的，因?yàn)閳D片的位置是固定了，如果通過(guò)這種方式實(shí)現(xiàn)了精靈圖那么在不同的分辨率下其實(shí)都是固定的尺寸，這樣效果就明顯有點(diǎn)呆板了

針對(duì)這樣的問(wèn)題，當(dāng)然也有折中的辦法，比如我們不加載精靈圖，而是通過(guò)background-image加載一張一張的圖片，這樣是可以的，但是需要預(yù)加載的處理，否則圖片大了會(huì)閃屏了。一般精靈圖都是通過(guò)position處理比較合理，我們有沒(méi)有辦法把這個(gè)圖片給縮放一下達(dá)到自適應(yīng)的目的呢？這里我給大家一個(gè)參考的方案，CSS3有一個(gè)scale可以這樣處理。

這里先參考下我右邊代碼的實(shí)現(xiàn)效果，人物是不是感覺(jué)縮放了？

縮放原理：

通過(guò)CSS3的scale處理直接可以讓元素縮放

需要處理的問(wèn)題：

需要計(jì)算出元素的縮放比，可以根據(jù)屏幕的寬度與UI的設(shè)計(jì)比例縮放

帶來(lái)的問(wèn)題：

通過(guò)scale縮放后瀏覽器認(rèn)為這個(gè)元素尺寸是沒(méi)變化的，所以要得到縮放后的尺寸算法應(yīng)該是 實(shí)際尺寸 * 縮放比
scale是默認(rèn)按照中間基點(diǎn)縮放，所以需要計(jì)算出實(shí)際布局與縮放后布局的一個(gè)內(nèi)部縮放距離，就是一個(gè)類似padding一樣的數(shù)據(jù)

具體的算法我右邊已經(jīng)給出來(lái)了

通過(guò)UI的設(shè)計(jì)與屏幕算一個(gè)縮放比

$(document).width() / 1440

通過(guò)這個(gè)縮放比，設(shè)置下元素的縮放大小，然后通過(guò)實(shí)際的人物尺寸與縮放比算出人物內(nèi)部縮放的數(shù)據(jù)boyInsideLeft與boyInsideTop

最終，要定為人物在中間位置的算法：

人物在馬路中間 = 馬路中間路的垂直距離 - 人物原始的垂直距離 - 人物縮放后的垂直距離

這樣算法我們可以弄一個(gè)公共方法出來(lái)，通過(guò)這樣的方式，我們可以很愉快的改造雪碧圖實(shí)現(xiàn)自適應(yīng)布局了~~~

PS: 我之后又仔細(xì)研究下雪碧圖的自適應(yīng)問(wèn)題，想到一種比較完美的方案，具體可以參見(jiàn)我的博客：原創(chuàng)：CSS3技術(shù)-雪碧圖自適應(yīng)縮放

任務(wù)

?不會(huì)了怎么辦

||

index.html
Swipe.js
style.css
pageA.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕課七夕主題</title> <link rel='stylesheet' href='style.css' /> <link rel='stylesheet' href='pageA.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript" src="Swipe.js"></script> </head> <style type="text/css"> .charector { width: 151px; height: 291px; left: 6%; top: 55%; position: absolute; background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat; } </style> <body> <div id='content'> <ul class='content-wrap'> <li> <div class="a_background"> <div class="a_background_top"></div> <div class="a_background_middle"></div> <div class="a_background_botton"></div> </div> </li> <li> 頁(yè)面2 </li> <li> 頁(yè)面3 </li> </ul> <div id="boy" class="charector"></div> </div> <script type="text/javascript"> var swipe = Swipe($("#content")); var $boy = $("#boy"); // 設(shè)置一下縮放比例與基點(diǎn)位置 var proportion = $(document).width() / 1440; // 設(shè)置元素縮放 $boy.css({ transform: 'scale(' + proportion + ')' }); // 獲取數(shù)據(jù) var getValue = function(className) { var $elem = $('' + className + ''); // 走路的路線坐標(biāo) return { height: $elem.height(), top: $elem.position().top }; } // 路的中間到頂部的距離 var pathY = function() { var data = getValue('.a_background_middle'); return data.top + data.height / 2; }(); // 獲取人物元素布局尺寸 var boyHeight = $boy.height(); var boyWidth = $boy.width(); // 計(jì)算下縮放后的元素與實(shí)際尺寸的一個(gè)距離 var boyInsideLeft = (boyWidth - (boyWidth*proportion))/2; var boyInsideTop = (boyHeight - (boyHeight*proportion))/2; // 修正小男孩的正確位置 // 中間路的垂直距離 - 人物原始的垂直距離 - 人物縮放后的垂直距離 $boy.css({ top: pathY - (boyHeight * proportion) - boyInsideTop }); </script> </body> </html>

///////// //頁(yè)面滑動(dòng) // ///////// /** * [Swipe description] * @param {[type]} container [頁(yè)面容器節(jié)點(diǎn)] * @param {[type]} options [參數(shù)] */ function Swipe(container) { // 獲取第一個(gè)子節(jié)點(diǎn) var element = container.find(":first"); var swipe = {}; // li頁(yè)面數(shù)量 var slides = element.find(">"); // 獲取容器尺寸 var width = container.width(); var height = container.height(); // 設(shè)置li頁(yè)面總寬度 element.css({ width: (slides.length * width) + 'px', height: height + 'px' }); // 設(shè)置每一個(gè)頁(yè)面li的寬度 $.each(slides, function(index) { var slide = slides.eq(index); // 獲取到每一個(gè)li元素 slide.css({ width: width + 'px', height: height + 'px' }); }); // 監(jiān)控完成與移動(dòng) swipe.scrollTo = function(x, speed) { // 執(zhí)行動(dòng)畫移動(dòng) element.css({ 'transition-timing-function' : 'linear', 'transition-duration' : speed + 'ms', 'transform' : 'translate3d(-' + x + 'px,0px,0px)' }); return this; }; return swipe; }

* { padding: 0; margin: 0; } ol, ul, li { list-style-type: none; } /*主體部分*/ #content { width: 100%; height: 100%; /*top: 20%;*/ overflow: hidden; position: absolute; } .content-wrap { position: relative; } .content-wrap > li { background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } a { position: absolute; top: 50%; left: 40%; }

/*背景圖*/ .a_background { width: 100%; height: 100%; position: absolute; } .a_background_top{ width: 100%; height: 71.6%; background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png"); background-size: 100% 100%; } .a_background_middle{ width: 100%; height: 13.1%; background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png"); background-size: 100% 100%; } .a_background_botton{ width: 100%; height: 15.3%; background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png"); background-size: 100% 100%; }

提問(wèn)題

提交

其他問(wèn)答

查看更多本節(jié)問(wèn)答

寫筆記

公開筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問(wèn)題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

9-2 補(bǔ)充內(nèi)容雪碧圖的自適應(yīng)縮放

補(bǔ)充內(nèi)容雪碧圖的自適應(yīng)縮放

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

9-2 補(bǔ)充內(nèi)容雪碧圖的自適應(yīng)縮放

熱搜

最近搜索清空

補(bǔ)充內(nèi)容雪碧圖的自適應(yīng)縮放

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～