整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天就來(lái)做一款nav炫酷的下拉菜單效果，適合在PC端和移動(dòng)端使用，運(yùn)用到CSS3的動(dòng)畫(huà)和過(guò)渡屬性，感興趣的朋友可以看看！
實(shí)現(xiàn)效果如下：
鼠標(biāo)移上“菜單”兩個(gè)字時(shí)，二級(jí)的下拉菜單像百葉窗一樣打開(kāi)，鼠標(biāo)移走后也會(huì)收縮隱藏起來(lái)！
實(shí)現(xiàn)代碼
html結(jié)構(gòu)：
css樣式：
了點(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)解，歡迎留言探討！
PC端進(jìn)行網(wǎng)頁(yè)制作時(shí)，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁(yè)布局，為了適應(yīng)小屏幕的設(shè)備，在移動(dòng)設(shè)備和跨平臺(tái)(響應(yīng)式)網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，多數(shù)使用流式布局，下面我們就對(duì)流式布局進(jìn)行詳細(xì)介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來(lái)設(shè)置寬度，也稱百分比自適應(yīng)的布局。 流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度 下面通過(guò)一個(gè)案例來(lái)演示固定布局如何轉(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>
打開(kāi)Chrome瀏覽器訪問(wèn)demo4-1.html，頁(yè)面效果如下圖所示。
可以嘗試改變?yōu)g覽器窗口的大小，頁(yè)面元素的大小不會(huì)隨瀏覽器窗口改變，如下圖所示。
下面修改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>
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
