整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在響應(yīng)式布局逐漸成為主流的今天，網(wǎng)頁(yè)或者app的流式布局已經(jīng)不算是一個(gè)新鮮的詞匯了。今天我要講的一個(gè)內(nèi)容也是跟頁(yè)面流式布局有關(guān)，如何讓你的網(wǎng)頁(yè)實(shí)現(xiàn)完美的縮放？
我們可以很快速的寫(xiě)出一個(gè)響應(yīng)式布局的頁(yè)面，首先看一下效果圖。
網(wǎng)頁(yè)布局
其中html部分的代碼如下：
html部分代碼
css中的item代碼為：
css代碼
通過(guò)以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行縮放。
But，你以為這就是我們想要的結(jié)果嗎？
當(dāng)然不是！在改變?yōu)g覽器窗口大小時(shí)，我們發(fā)現(xiàn)雖然div的寬度是進(jìn)行了縮放，但是高度卻沒(méi)變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。
縮放后寬高比
從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結(jié)果。
我們需要達(dá)到的效果是在改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行等比例的縮放。
首先，可以使用Javascript代碼去實(shí)現(xiàn)，這是沒(méi)有問(wèn)題的。但是綁定Javascript的onresize事件，在拖拽時(shí)可能會(huì)出卡頓現(xiàn)象，體驗(yàn)不是很好。
接下來(lái)我們通過(guò)CSS來(lái)實(shí)現(xiàn)以上的效果。
使用的核心屬性是我們平時(shí)并不太注意的padding-bottom。
padding-bottom有一個(gè)很容易讓人忽略的特性是，當(dāng)取值為百分比形式時(shí)，其百分比的基數(shù)是父元素的寬度，而不是高度。
因此我們可以在不用給父元素設(shè)置高度的時(shí)候，就可以通過(guò)padding-bottom屬性確定當(dāng)前元素的高度。我們的做法如下。
將元素的height屬性設(shè)為0，通過(guò)padding-bottom屬性確定元素高度。
設(shè)置合理的padding-bottom值，例如上述的例子中，在寬度為21%時(shí)，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%
修改后的CSS代碼如下。
修改后的CSS
修改后，我們?cè)俅握{(diào)整瀏覽器窗口的大小，就會(huì)發(fā)現(xiàn)div是等比例的進(jìn)行縮放，完美達(dá)到了我們的要求。
修改后等比例縮放
在這里，可能會(huì)有人有疑問(wèn)如果設(shè)置overflow:hidden;那么里面的文字會(huì)不會(huì)因?yàn)槌^(guò)height，就會(huì)被隱藏了？
答案是不會(huì)的，根據(jù)CSS2.1的規(guī)范，overflow只會(huì)對(duì)處于padding外面的內(nèi)容生效，即只有超出了 padding區(qū)域的內(nèi)容才會(huì)被overflow屬性隱藏掉。而在設(shè)置padding-bottom后，實(shí)際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會(huì)生效。
今天這篇文章主要講解了利用CSS完成頁(yè)面等比例縮放的最簡(jiǎn)單方式，你學(xué)會(huì)了嗎？
html頁(yè)面制作中，可以利用 CSS 中的 transform 屬性對(duì)圖片進(jìn)行旋轉(zhuǎn)，縮放，移動(dòng)或傾斜的操作。而今天我們只說(shuō)說(shuō) transform 屬性對(duì)圖片進(jìn)行等比例的縮放操作。
transform：該屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。它允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜的操作。
縮放使用值：
scaleY(n)：對(duì)高度進(jìn)行縮n倍的縮放
scaleX(n)：對(duì)寬度進(jìn)行縮放，n指的是縮放比例
scale(n)：對(duì)整體高度和寬度進(jìn)行縮放，n為縮放的比例，為數(shù)字
示例代碼：
transform: scale(2)
scaleX()：可以對(duì)元素(圖片)的寬度進(jìn)行縮放，以下代碼是將原來(lái)的圖片的寬度放大了2倍。
示列代碼：
<div class="divimg"> <img src="biao.png" > <br/> <!--寬度縮放--> <img src="biao.png" style="transform:scaleX(2);"> </div>
運(yùn)行結(jié)果：
了點(diǎn)時(shí)間寫(xiě)的，蠻長(zhǎng)時(shí)間了。個(gè)人很喜歡，一段很簡(jiǎn)單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因?yàn)榇a文字呈現(xiàn)沒(méi)有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。
到底多簡(jiǎn)單，先來(lái)看代碼
基于jQuery
基于jQuery
拖拽實(shí)例圖：
拖拽實(shí)例圖
將代碼剝離，只要寫(xiě)5行就可以實(shí)現(xiàn)拖拽了，是不是很簡(jiǎn)單：
調(diào)用方式
放大、縮小
我們給拖拽增加點(diǎn)功能，支持放大、縮小，先看實(shí)例圖:
放大、縮小
將代碼剝離，原先的代碼保留不變，增加一個(gè)綁定事件：
放大、縮小
這樣來(lái)實(shí)現(xiàn)放大、縮小、拖拽是不是很簡(jiǎn)單，還能實(shí)現(xiàn)很多其他效果，大家慢慢領(lǐng)悟。
原理分析：
放大、縮小、拖拽都離不開(kāi)在網(wǎng)頁(yè)上拖動(dòng)鼠標(biāo)，對(duì)于前端來(lái)說(shuō)就是 document 的 mousemove，當(dāng)鼠標(biāo)在網(wǎng)頁(yè)上移動(dòng)的時(shí)候，無(wú)時(shí)無(wú)刻不在觸發(fā) mousemove 事件，當(dāng)鼠標(biāo)觸發(fā)事件時(shí)，什么時(shí)候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個(gè)對(duì)象來(lái)判定是否進(jìn)行操作：
move：是否執(zhí)行觸發(fā)操作
move_target：操作的元素對(duì)象
move_target.posix：操作對(duì)象的坐標(biāo)
call_down：mousemove的時(shí)候的回調(diào)函數(shù)，傳回來(lái)的this指向document
call_up：當(dāng)鼠標(biāo)彈起的時(shí)候執(zhí)行的回調(diào)函數(shù)，傳回來(lái)的this指向document
小提示：
簡(jiǎn)單的操作，只需要設(shè)定 move_target 對(duì)象，設(shè)置 move_target 的時(shí)候不要忘記了 move_target.posix 哦；
復(fù)雜的操作可以通過(guò)call_down、call_up進(jìn)行回調(diào)操作，這個(gè)時(shí)候是可以不用設(shè)置 move_target 對(duì)象的
深入研究
拖拽和放大、縮小實(shí)現(xiàn)了，但是有個(gè)問(wèn)題，當(dāng)我們鼠標(biāo)點(diǎn)擊并滑動(dòng)的時(shí)候，是會(huì)選中文本的，為了避免這個(gè)問(wèn)題，大家可以自行百度
css 阻止文本選中
css 阻止文本選中
網(wǎng)頁(yè)的放大、縮小、拖拽事件就研究到這里了，小編不再對(duì)如何拓展進(jìn)行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了。～～
源碼鏈接地址：
http://orzcss.com/posts/d554a392/
本文內(nèi)容均屬個(gè)人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注，定時(shí)推送，互動(dòng)精彩多，若你有更好的見(jiàn)解，歡迎留言探討！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
