<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link type="text/css" href="https://www.jb51.net/css/common.css"> <link type="text/css" href="https://www.jb51.net/css/style.css"> <script src="https://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"></script> </head> <body> <div> <div> <div> <a href="javascript:;" title="节目单" data-target="liveprogram"></a> <a href="javascript:;" title="弹幕" data-target="barrage"><i></i></a> </div> <div > <!--弹幕--> <div> <div> <div> <ul> <li> <span data-name="sysmsg">系统消息：</span> <span>欢迎进入宁夏卫视!</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li><li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>评论1</span> </li> <li> <span data-name="liiuxiaobao">starof<i></i>：</span> <span>我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长</span> </li> <li> <span data-name="_11367384@qq">_11367384@qq<i></i>：</span> <span>fasf</span> </li> </ul> </div> </div> <div> <div> <div> <textarea rows="2" cols="1" maxlength="30" placeholder="请在这里输入评论"></textarea> <p>0/30</p> <div></div> <div> <p> <a href="javascript:void(0);" data-type="login" title="登录">登录</a> 或 <a href="javascript:void(0);" data-type="reg" title="注册">注册</a>后可以发送弹幕 </p> <p > <a href="https://passport.pptv.com/checkPhone.aspx" target="_blank">绑定手机</a>即可发送弹幕哦 </p> <p><em>5</em> 秒后可再次评论</p> </div> </div> <a href="javascript:void(0);">发送</a> <a href="javascript:void(0);"></a> <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> </div> <!--绑定手机提示--> <div> <a href="javascript:void(0);" title="关闭"></a> <div> <h4>提示</h4> <ul> <li>绑定完成前请不要关闭此窗口。</li> </ul> <p> <a href="javascript:void(0);" title="">已绑定手机</a> <a 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>
css
common.css