大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

可以缩放的侧边栏

前端入坑纪 55

今天来分享个最近做的侧边效果,思路很easy

好,详解如下!

OK,first things first! github项目地址

抱歉,长得有点对不起观众
HTML 结构
    <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日出生于台湾省台东市,台东阿美族原住民,华语流行乐女歌手。</p>
        <p>1999年,黄丽玲在南投教921地震后的小朋友们唱诗歌时被经纪人发现。2003年,黄丽玲正式签约艾回唱片。</p>
        <p>2007年,黄丽玲凭借首张个人专辑《失恋无罪》获得第18届台湾金曲奖最佳新人奖提名 [1] ;同年7月,黄丽玲与相差八岁的棒球选手黄甘霖结婚,并在其后育有一女 [2] 。2009年,黄丽玲凭借《天生歌姬》专辑首次获得台湾金曲奖最佳国语女歌手奖提名 [3] 。
        </p>2011年,黄丽玲凭借专辑《寂寞不痛》再次获得金曲奖最佳国语女歌手提名。
        <p>2012年,黄丽玲凭借专辑《我们会更好的》第三次获得金曲奖最佳国语女歌手提名。同年,黄丽玲还发行了第五张个人专辑《幸福了,然后呢》。</p>
        <p>2013年,黄丽玲在台北小巨蛋举办了Feel-Lin个人演唱会 [4] 。2014年,黄丽玲加盟索尼音乐 [5] ;并于同年12月30日发行第六张个人专辑《罪恶感》。
        </p>
        <p>2015年,黄丽玲因参加职业歌手对战节目《我是歌手第三季》而在内地获得更高关注度 [6] ;同年,黄丽玲还凭借专辑《罪恶感》第四次获得金曲奖最佳国语女歌手提名。
        </p>
    </div>

nav是隐藏起来的导航,div.mainWrp,是要动画变化的主体,里面的p只是内容填充下。

CSS 结构
        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加过渡时的样式,也就是transition上的东东。然后就是怎么变得东西.shrik

JavaScript 结构
        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点击的时候,加事件(让div.mainWrp 多个shrik的class)
2.给div.mainWrp点击的时候,加事件(让div.mainWrp 少个shrik的class)
3.因为menu 是嵌套在 div.mainWrp 内,所以要阻止事件冒泡

好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福!

打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包