前端入坑紀(jì) 55
今天來(lái)分享個(gè)最近做的側(cè)邊效果，思路很easy
好，詳解如下！
OK，first things first！ github項(xiàng)目地址
抱歉，長(zhǎng)得有點(diǎn)對(duì)不起觀眾
HTML 結(jié)構(gòu)
<nav>
<ul>
<li><a href="javascript:;">Page1</a></li>
<li><a href="javascript:;">Page2</a></li>
<li><a href="javascript:;">Page3</a></li>
<li><a href="javascript:;">Page4</a></li>
<li><a href="javascript:;">Page5</a></li>
</ul>
</nav>
<div class="mainWrp" id="mainWrp">
<button id="menu">menu</button>
<p>
黃麗玲（A-Lin），1983年9月20日出生于臺(tái)灣省臺(tái)東市，臺(tái)東阿美族原住民，華語(yǔ)流行樂(lè)女歌手。</p>
<p>1999年，黃麗玲在南投教921地震后的小朋友們唱詩(shī)歌時(shí)被經(jīng)紀(jì)人發(fā)現(xiàn)。2003年，黃麗玲正式簽約艾回唱片。</p>
<p>2007年，黃麗玲憑借首張個(gè)人專輯《失戀無(wú)罪》獲得第18屆臺(tái)灣金曲獎(jiǎng)最佳新人獎(jiǎng)提名 [1] ；同年7月，黃麗玲與相差八歲的棒球選手黃甘霖結(jié)婚，并在其后育有一女 [2] 。2009年，黃麗玲憑借《天生歌姬》專輯首次獲得臺(tái)灣金曲獎(jiǎng)最佳國(guó)語(yǔ)女歌手獎(jiǎng)提名 [3] 。
</p>2011年，黃麗玲憑借專輯《寂寞不痛》再次獲得金曲獎(jiǎng)最佳國(guó)語(yǔ)女歌手提名。
<p>2012年，黃麗玲憑借專輯《我們會(huì)更好的》第三次獲得金曲獎(jiǎng)最佳國(guó)語(yǔ)女歌手提名。同年，黃麗玲還發(fā)行了第五張個(gè)人專輯《幸福了，然后呢》。</p>
<p>2013年，黃麗玲在臺(tái)北小巨蛋舉辦了Feel-Lin個(gè)人演唱會(huì) [4] 。2014年，黃麗玲加盟索尼音樂(lè) [5] ；并于同年12月30日發(fā)行第六張個(gè)人專輯《罪惡感》。
</p>
<p>2015年，黃麗玲因參加職業(yè)歌手對(duì)戰(zhàn)節(jié)目《我是歌手第三季》而在內(nèi)地獲得更高關(guān)注度 [6] ；同年，黃麗玲還憑借專輯《罪惡感》第四次獲得金曲獎(jiǎng)最佳國(guó)語(yǔ)女歌手提名。
</p>
</div>
nav是隱藏起來(lái)的導(dǎo)航，div.mainWrp，是要?jiǎng)赢嬜兓闹黧w，里面的p只是內(nèi)容填充下。
CSS 結(jié)構(gòu)
body {
background-color: #fff;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.mainWrp {
padding: 10px;
position: fixed;
background-color: lightcyan;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
overflow: auto;
box-shadow: 0 0 1px #ccc, -3px 0 8px lightcyan;
transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1)
}
.shrik {
transform: scale3d(.8, .8, .8) translateX(70%)
}
nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background-color: lightcyan;
}
nav li {
line-height: 37px;
width: 80px;
text-align: center;
}
nav li a {
color: #333;
}
讓nav和div.mainWrp都fixed布局，給div.mainWrp加過(guò)渡時(shí)的樣式，也就是transition上的東東。然后就是怎么變得東西.shrik
JavaScript 結(jié)構(gòu)
var menu = document.querySelector('#menu')
var mainWrp = document.querySelector('#mainWrp')
menu.addEventListener('touchstart', function(evt) {
evt.stopPropagation() // 阻止事件冒泡
mainWrp.className = "mainWrp shrik"
})
mainWrp.addEventListener('touchstart', function(evt) {
mainWrp.className = "mainWrp"
})
1.給menu點(diǎn)擊的時(shí)候，加事件（讓div.mainWrp 多個(gè)shrik的class）
2.給div.mainWrp點(diǎn)擊的時(shí)候，加事件（讓div.mainWrp 少個(gè)shrik的class）
3.因?yàn)閙enu 是嵌套在 div.mainWrp 內(nèi)，所以要阻止事件冒泡
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
打開支付寶首頁(yè)搜 625097528 領(lǐng)紅包，領(lǐng)到大紅包的小伙伴趕緊使用哦！
支持你我，掃一掃紅包
