整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天就來做一款nav炫酷的下拉菜單效果，適合在PC端和移動端使用，運用到CSS3的動畫和過渡屬性，感興趣的朋友可以看看！
實現(xiàn)效果如下：
鼠標(biāo)移上“菜單”兩個字時，二級的下拉菜單像百葉窗一樣打開，鼠標(biāo)移走后也會收縮隱藏起來！
實現(xiàn)代碼
html結(jié)構(gòu)：
css樣式：
了點時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠?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 中增加了幾個對象來判定是否進(jìn)行操作：
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進(jìn)行回調(diào)操作，這個時候是可以不用設(shè)置 move_target 對象的
深入研究
拖拽和放大、縮小實現(xiàn)了，但是有個問題，當(dāng)我們鼠標(biāo)點擊并滑動的時候，是會選中文本的，為了避免這個問題，大家可以自行百度
css 阻止文本選中
css 阻止文本選中
網(wǎng)頁的放大、縮小、拖拽事件就研究到這里了，小編不再對如何拓展進(jìn)行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了。～～
源碼鏈接地址：
http://orzcss.com/posts/d554a392/
本文內(nèi)容均屬個人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！
PC端進(jìn)行網(wǎng)頁制作時，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁布局，為了適應(yīng)小屏幕的設(shè)備，在移動設(shè)備和跨平臺(響應(yīng)式)網(wǎng)頁開發(fā)過程中，多數(shù)使用流式布局，下面我們就對流式布局進(jìn)行詳細(xì)介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度，也稱百分比自適應(yīng)的布局。 流式布局實現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度 下面通過一個案例來演示固定布局如何轉(zhuǎn)換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉(zhuǎn)換為百分比布局</title>
<style type="text/css">
body>*{ width: 980px; height:auto; margin:0 auto;
margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height: 300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>
打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。
可以嘗試改變?yōu)g覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。
下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:
<style type="text/css">
body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding :5px; }
header{ height:50px; }
section{ height: 300px; }
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left; }
aside{ width:25.510204%; /*250÷980*/}
article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
</style>
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
