html+js
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"></script> </head> <body id="body" class=""> <div class="lv-wrapper cf"> <div class="lv-right-interact"> <div class="lv-right-interact-menu cf "> <a href="javascript:;" title="节目单" class="show now" data-target="liveprogram"></a> <a href="javascript:;" title="弹幕" class="barrage" data-target="barrage"><i class="ic2"></i></a> </div> <div class="tabcon" > <!--弹幕--> <div class="barrage"> <div class="chat-wrap"> <div class="chat"> <ul> <li class=""> <span class="" data-name="sysmsg">系统消息：</span> <span class="txt">欢迎进入宁夏卫视!</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">评论1</span> </li> <li class=""> <span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span> <span class="txt">我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li> <li class=""> <span class="vipcolor" data-name="_11367384@qq">_11367384@qq<i class="vip"></i>：</span> <span class="txt">fasf</span> </li> </ul> </div> </div> <div class="comments-area"> <div id="form-wrap"> <div class="formtext"> <textarea name="" rows="2" cols="1" maxlength="30" placeholder="请在这里输入评论" style="display:none;"></textarea> <p class="num" style="display:none;">0/30</p> <div class="user_facebox" style="display:none;"></div> <div class="loginarea" style="display: block;"> <p class="tips login" style="display: none;"> <a href="javascript:void(0);" data-type="login" title="登录">登录</a> 或 <a href="javascript:void(0);" data-type="reg" title="注册">注册</a>后可以发送弹幕 </p> <p class="tips bindphone" > <a href="http://passport.pptv.com/checkPhone.aspx" target="_blank">绑定手机</a>即可发送弹幕哦 </p> <p class="tips wait" style="display:none"><em>5</em> 秒后可再次评论</p> </div> </div> <a href="javascript:void(0);" class="btn-submit">发送</a> <a href="javascript:void(0);" class="btn-set"></a> <div class="setform"> <ul class="dm-config cf"> <li class="dmopacity"> <span class="dm-setname">弹幕显示设置</span> <div class="dragbar" style="position: relative;"> <span class="progress"></span> <span class="icon" style="position: absolute;"></span> </div> <span class="percent">50%</span> </li> <li> <span class="dm-setname">我的弹幕设置</span> <div class="rgb-set cf"> <span>颜色</span> <span class="rgb">#ffffff</span> <span class="color" style="background:#ffffff"></span> </div> <div class="takecolor cf"> <a href="javascript:;" data-color="ff0000" style="background:#ff0000;"></a> <a href="javascript:;" data-color="3399ff" style="background:#3399ff;"></a> <a href="javascript:;" data-color="00fcff" style="background:#00fcff;"></a> <a href="javascript:;" data-color="ff9900" style="background:#ff9900;"></a> <a href="javascript:;" data-color="00ff12" style="background:#00ff12;"></a> <a href="javascript:;" data-color="fff100" style="background:#fff100;"></a> <a href="javascript:;" data-color="c8b33c" style="background:#c8b33c;"></a> <a href="javascript:;" data-color="ff0096" style="background:#ff0096;"></a> <a href="javascript:;" data-color="8600ff" style="background:#8600ff;"></a> <a href="javascript:;" data-color="3399ff" style="background:#3399ff;"></a> </div> </li> </ul> </div> </div> <!--绑定手机提示--> <div class="pop-phone" style="display: none;"> <a href="javascript:void(0);" title="关闭" class="close"></a> <div class="bd"> <h4>提示</h4> <ul> <li>绑定完成前请不要关闭此窗口。</li> </ul> <p> <a href="javascript:void(0);" title="" class="locked">已绑定手机</a> <a class="failed" href="http://bbs.pptv.com/forum.php?mod=viewthread&tid=31660" target="_blank">绑定遇到问题</a> </p> </div> </div> </div> </div> </div> </div> </div> </body> <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) + '%'); } }); } //发表评论 $(".comments-area textarea").focus(function(){ $("#form-wrap").addClass("focus"); }); $('.comments-area textarea').bind('input propertychange', function() { $('.comments-area .num').html($('.comments-area textarea').val().length+"/30"); }); $(".comments-area textarea").blur(function(){ if($('.comments-area textarea').val().length==0){ $("#form-wrap").removeClass("focus"); } }); $(".btn-set").click(function(evt){ $(".setform").toggle(); evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true; }); $(".tabcon").click(function(){ if($(".setform").is(":visible")){ $(".setform").hide(); } }); $(".setform").click(function(evt){ evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true; }); $(".takecolor a").click(function(){ $(".rgb-set .rgb").html("#"+$(this).attr("data-color")); $(".rgb-set .color").css("backgroundColor",$(this).css("backgroundColor")); }); </script> </html>