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

推荐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');});}

效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！