整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
了點時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因為代碼文字呈現(xiàn)沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。
到底多簡單，先來看代碼
基于jQuery
基于jQuery
拖拽實例圖：
拖拽實例圖
將代碼剝離，只要寫5行就可以實現(xiàn)拖拽了，是不是很簡單：
調(diào)用方式
放大、縮小
我們給拖拽增加點功能，支持放大、縮小，先看實例圖:
放大、縮小
將代碼剝離，原先的代碼保留不變，增加一個綁定事件：
放大、縮小
這樣來實現(xiàn)放大、縮小、拖拽是不是很簡單，還能實現(xiàn)很多其他效果，大家慢慢領(lǐng)悟。
原理分析：
放大、縮小、拖拽都離不開在網(wǎng)頁上拖動鼠標(biāo)，對于前端來說就是 document 的 mousemove，當(dāng)鼠標(biāo)在網(wǎng)頁上移動的時候，無時無刻不在觸發(fā) mousemove 事件，當(dāng)鼠標(biāo)觸發(fā)事件時，什么時候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個對象來判定是否進行操作：
move：是否執(zhí)行觸發(fā)操作
move_target：操作的元素對象
move_target.posix：操作對象的坐標(biāo)
call_down：mousemove的時候的回調(diào)函數(shù)，傳回來的this指向document
call_up：當(dāng)鼠標(biāo)彈起的時候執(zhí)行的回調(diào)函數(shù)，傳回來的this指向document
小提示：
簡單的操作，只需要設(shè)定 move_target 對象，設(shè)置 move_target 的時候不要忘記了 move_target.posix 哦；
復(fù)雜的操作可以通過call_down、call_up進行回調(diào)操作，這個時候是可以不用設(shè)置 move_target 對象的
深入研究
拖拽和放大、縮小實現(xiàn)了，但是有個問題，當(dāng)我們鼠標(biāo)點擊并滑動的時候，是會選中文本的，為了避免這個問題，大家可以自行百度
css 阻止文本選中
css 阻止文本選中
網(wǎng)頁的放大、縮小、拖拽事件就研究到這里了，小編不再對如何拓展進行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了。～～
源碼鏈接地址：
http://orzcss.com/posts/d554a392/
本文內(nèi)容均屬個人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！
一、先創(chuàng)建一個html文件，記得添加vue庫文件。
二、創(chuàng)建一盒容器vmdiv，用vue綁定它，測試vue綁定后的插入值text1效果。
三、加入文本框和兩個按鈕。
四、通過flex排序，讓它們?nèi)齻€豎排。比例為文本框占4，按鈕占1。
五、測試一下按鈕的點擊事件。
六、給文本框添加style樣式，給它字體大小為16px，并設(shè)置一個變量size，讓它來控制字的大小，通過點擊后，字變大加5，變小減5。
ello，各位小伙伴，今天廣州藍景跟大家分享前端技術(shù)干貨，頁面加載速度問題。
首先我們都討厭加載緩慢的頁面！
要知道加載時間每增加1秒（0-5秒之間），網(wǎng)站轉(zhuǎn)化率就會平均下降4.42%。頁面加載時間的前五秒對轉(zhuǎn)化率的影響最大。
幸運的是，我們可以通過優(yōu)化HTML和CSS文件來提高網(wǎng)站的頁面加載速度，而無需花費昂貴的服務(wù)器資源！
注：本文將僅關(guān)注如何使用HTML和CSS文件來提高頁面加載速度。
延遲加載
延遲加載是一種縮短關(guān)鍵渲染路徑長度的策略，從而減少頁面加載時間。
a） 拆分CSS文件
盡量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上執(zhí)行。
<!-- 加載和解析整個sytles.css文件會阻塞主瀏覽器渲染 -->
<link rel="stylesheet" href="styles.css" />對于打印媒體，可以使用：
<!-- 加載和解析print.css時不會阻塞渲染，只會在打印模式加載該樣式 -->
<link rel="stylesheet" href="print.css" media="print" />對于移動設(shè)備屏幕，可以使用：
<!-- 只會在移動設(shè)備這樣的小屏幕下才會加載和解析該樣式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />對于平板電腦屏幕，可以使用：
<!-- 不會在大屏幕上加載和解析該樣式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />對于移動屏幕橫屏或豎屏，也可以使用不同的CSS文件：
<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />通過將CSS分離成多個文件，主文件（在本例中為styles.css）變得小多了，從而減少了渲染被阻塞的時間，大大提高了頁面加載速度。
b） CSS的font-display屬性
font-display屬性應(yīng)用于@font-face規(guī)則，定義瀏覽器如何加載和顯示字體文件，從而允許在字體加載或加載失敗時以回退字體顯示文本。這可以通過使文本可見取代空白屏幕來提高性能，但代價是閃爍無樣式的文本。
@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}c） HTML文件中的圖片懶加載
使用loading="lazy"，以便僅在需要時加載圖像。這將大大降低頁面加載速度。
<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />2. 選擇正確的圖片格式
.webp格式的圖片被推薦作為網(wǎng)絡(luò)的圖片格式標(biāo)準。
WebP無損圖片在尺寸方面比PNG小26%。WebP有損圖片比同等SSIM質(zhì)量指數(shù)下的同類JPEG圖片小25-34%。動畫WebP圖片支持有損、無損和透明，與GIF和APNG相比，可以提供更小的尺寸。
下圖是WebP與PNG圖片格式對比：
下圖是WebP與JPEG圖片格式對比：
所有這些測試都可以證明，即使是有損壓縮，webp圖片的壓縮率也更高，因此大大減少了頁面加載時間！
你還可以嘗試另一種圖片格式.avif，在少數(shù)情況下比.webp更好，但由于該格式比較新（2019年發(fā)布），因此還沒有多少瀏覽器支持.avif格式！
使用<picture>元素
a） 可用于針對不同的media條件裁剪或修改圖片（例如，在較小的顯示器上加載大圖片的縮略版本）。
b）在不支持webp格式的情況下提供替代圖片格式。
c）通過為查看器加載最合適的圖片來節(jié)省帶寬并加快頁面加載時間。
如果為高DPI顯示器提供更高分辨率的圖像版本，請改用<img>元素上的srcset。這允許瀏覽器在數(shù)據(jù)保存模式下選擇低分辨率版本，并且你不必編寫顯式media條件。
<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>3. 渲染圖像
由于圖像是異步加載的，并在第一次繪制后繼續(xù)加載，如果在加載之前未定義其尺寸，則可能會導(dǎo)致重排到頁面內(nèi)容。例如，文本因加載圖像而被推下頁面。因此，設(shè)置width和高height屬性至關(guān)重要，以便瀏覽器可以在布局中為它們保留空間。
對于任何background-image，設(shè)置background-color值很重要，以便在下載圖像之前，覆蓋的內(nèi)容保持可讀。
4. 壓縮HTML和CSS文件
壓縮指的是從代碼中刪除所有不必要的字符以減小尺寸。刪除的是不需要的空格字符，如空格、換行符、制表符等以及注釋。
使用壓縮工具，如CodeBeautify，CSS Minifier等來縮小HTML和CSS文件。有助于為網(wǎng)站提供更快的頁面加載速度。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
