慕课网实战项目《WebAPP书城整站开发》笔记四：唤出字体面板交互开发

最新推荐文章于 2018-03-08 08:55:00 发布

「已注销」

最新推荐文章于 2018-03-08 08:55:00 发布

阅读量1.4k

点赞数 1

分类专栏： Web开发文章标签： web app addClass jQuery

本文链接：https://blog.csdn.net/Lovejulyer/article/details/72593734

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

推荐IMOOC实战课程：《WebApp书城整站开发》

html

        <!-- 设置操作面板 -->
        <div class="nav-pannel-bk font-container" id="font-container" style="display:none"></div>
        <div class="nav-pannel font-container" id="font_container" style="display:none"> 
            <div class="child-mod">
                <span>字号</span>
                <button id="large-font" class="spe-button">
                    大
                </button>
                <button id="small-font" class="spe-button" style="margin-left:10px">
                    小
                </button>
            </div>
            <div class="child-mod" id="bk-container">
                <span>背景</span>
                <ul class="bk-container">
                    <li class="default"></li>
                    <li class="seaGreen"></li>
                    <li class="lightYellow"></li>
                    <li class="green"></li>
                    <li class="lightCyan"></li>
                </ul>
            </div>
        </div>

javascript

        var Win = $(window);

        // Dom 结构
        var Dom = {
            font_container : $('#font-container'),
        };

        function EventHandler() {
            // todo 交互的事件绑定
            $('#action_mid').click(function () {
                // todo 屏幕touch事件
                if(Dom.font_container.css('display') === 'none'){
                    return ture;
                }else{
                    Dom.font_container.hide();
                    Dom.font_button.removeClass('current');
                }
            });

            $('#font-button').click(function(){
                // todo 唤起字体面板
                if(Dom.font_container.css('display') === 'none'){
                    Dom.font_container.show();
                    Dom.font_button.addClass('current');
                }else{
                    Dom.font_container.hide();
                    Dom.font_button.removeClass('current');
                }
            });

            $('#night-button').click(function(){
                // todo 触发背景切换事件
            });

            Win.scoll(function(){
                // todo 屏幕scroll事件
                Dom.font_container.hide();
                 Dom.font_button.removeClass('current');
            });
        }