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