此时会有问题，点击“设置图标”时显示不出来内容框。因为事件会冒泡，点击.btn-set后首先显示内容框，然后事件会冒泡到.tabcon的父元素，父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$(".btn-set").click(function(evt){ $(".setform").toggle(); evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true; });
第三步，点击内容区，正常显示。
2、设置内容框样式
2.1实现html如下
<div> <ul> <li> <span>弹幕显示设置</span> <div> <span></span> <span></span> </div> <span>50%</span> </li> <li> <span>我的弹幕设置</span> <div> <span>颜色</span> <span>#ffffff</span> <span></span> </div> <div> <a href="javascript:;" data-color="ff0000"></a> <a href="javascript:;" data-color="3399ff"></a> <a href="javascript:;" data-color="00fcff"></a> <a href="javascript:;" data-color="ff9900"></a> <a href="javascript:;" data-color="00ff12"></a> <a href="javascript:;" data-color="fff100"></a> <a href="javascript:;" data-color="c8b33c"></a> <a href="javascript:;" data-color="ff0096"></a> <a href="javascript:;" data-color="8600ff"></a> <a href="javascript:;" data-color="3399ff"></a> </div> </li> </ul> </div>
2.2实现css如下
/*弹幕颜色*/ .setform { z-index:99; color: #999; background: #252525; border: 1px solid #424242; width: 240px; padding: 12px 22px 18px 18px; } .dm-config { margin: 18px 0 0 0; display: block } .dm-config li { height: 90px } .dm-setname { font-size: 14px; color:#dedede; font-weight: bold; margin-bottom:20px; display: block } .rgb-set { height: 22px } .rgb-set span { float: left; display: inline; color:#999; } .rgb { width: 50px; height: 18px; border: 1px solid #d3d3d3; line-height: 18px; margin-left: 5px; color: #424242; padding: 0 0 0 5px } .color { width: 20px; height: 20px; border: 1px solid #d3d3d3; margin: -1px 0 0 2px } .takecolor { width: 80px; margin: 5px 0 0 30px } .takecolor a { display: block; width: 16px; height: 16px; float: left } .dmopacity { float: right; border-left: 1px solid #d3d3d3; padding-left: 22px } .dragbar { width: 85px; height: 10px; background: #d3d3d3; position: relative; margin-bottom: 10px; cursor: default } .dragbar .progress { width: 50%; position: absolute; height: 10px; top: 0; left: 0; background: #39f } .dragbar .icon { width: 4px; height: 16px; position: absolute; top: -3px; left: 50%; background: #007cf7 } .percent { width: 85px; text-align: center; display: block; color: #39f }
3、进度条百分比实现
<script> dragbar(85); function dragbar( barwidth){ //var $box = $('.dragbar'); var $bg = $('.dragbar'); var $bgcolor = $('.progress'); var $btn = $('.icon'); var $text = $('.percent'); var statu = false; var ox = 0; var lx = 0; var left = 0; var bgleft = 0; $btn.mousedown(function(e) { lx = $btn.offset().left; //距离浏览器左边的距离 ox = e.pageX - left; statu = true; }); $(document).mouseup(function() { statu = false; }); $bg.mousemove(function(e) { if (statu) { left = e.pageX - ox; if (left < 0) { left = 0; } if (left > barwidth) { left = barwidth; } $btn.css('left', left); $bgcolor.width(left); $text.html(parseInt(left / barwidth*100) + '%'); } }); $bg.click(function(e) { if (!statu) { bgleft = $bg.offset().left; left = e.pageX - bgleft; if (left < 0) { left = 0; } if (left > barwidth) { left = barwidth; } $btn.css('left', left); $bgcolor.stop().animate({ width: left }, barwidth); $text.html(parseInt(left / barwidth*100) + '%'); } }); } </script>