仿视频弹幕实战
来源：互联网 发布：vb获取cpu序列号 编辑：程序博客网 时间：2024/05/02 04:48
- 新建一个div盒子，在内部添加标题，并设置样式
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width:1000px; /*设置宽度1000px*/ text-align:center;/*内容居中*/ margin:0 auto;/*div盒子居中*/ position: relative; border:1px solid red; } h1{ color:white;/*颜色*/ text-shadow:2px 2px 5px #000;/*文字阴影*/ } /*-------------------接上一步---------------*/ </style> </head> <body> <div class="box"> <h1>DM system</h1> <!-------------------接上一步----------------------> <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> </div> </body></html>效果图： 
3. 添加一层透明的弹幕层，添加开始弹幕和关闭弹幕按钮以及弹幕初始数据
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width:1000px; /*设置宽度1000px*/ text-align:center;/*内容居中*/ margin:0 auto;/*div盒子居中*/ position: relative; border:1px solid red; } h1{ color:white;/*颜色*/ text-shadow:2px 2px 5px #000;/*文字阴影*/ } /*-------------------接上一步---------------*/ .dm{width:800px;height:474px; background:rgba(41,31,31,0);/*颜色透明*/ margin:0 auto;/*居中显示*/ position: absolute;/*相对dm*/ top:60px;left:100px; z-index: 11;/*层叠*/ } .dm_show{color:white;position: relative;}/*弹幕内容*/ .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px} .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100; border-radius:20px;/*圆角*/ text-decoration:none}/*去除超链接下划线*/ .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100; border-radius:20px;text-decoration:none;} </style> </head> <body> <div class="box"> <h1>DM system</h1> <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> <!-------------------接上一步----------------------> <a class="s_dm" href="javascript:void(0)">弹幕</a> <!-- 弹幕开始--> <div class="dm"> <a href="javascript:void(0)" class="e_dm">X</a> <div class="dm_show" > <div>未来会变得更好</div> <div>越努力越幸运</div> <div>微笑面对生活</div> <div>脚踏实地</div> <div>沉淀蜕变</div> <div>远离浮躁</div> </dm> </div> <!-- 弹幕结束--> </div> </body></html>效果图： 
4. 增加发送弹幕文本框以及发送按钮
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width:1000px; /*设置宽度1000px*/ text-align:center;/*内容居中*/ margin:0 auto;/*div盒子居中*/ position: relative; border:1px solid red; } h1{ color:white;/*颜色*/ text-shadow:2px 2px 5px #000;/*文字阴影*/ } .dm{width:800px;height:474px; background:rgba(41,31,31,0);/*颜色透明*/ margin:0 auto;/*居中显示*/ position: absolute;/*相对dm*/ top:60px;left:100px; z-index: 11;/*层叠*/ } .dm_show{color:white;position: relative;}/*弹幕内容*/ .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px} .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100; border-radius:20px;/*圆角*/ text-decoration:none}/*去除超链接下划线*/ .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100; border-radius:20px;text-decoration:none;} /*-------------------接上一步---------------*/ .send{ width:600px; height: 40px; position: absolute; top:517px; left: 10px; margin: 0 auto; } .send .s_btn{ width:82px;height:30px; display:block;/*设置为块级元素*/ background:#ff8140; float:right;/*右滑动*/ margin:4px 20px 0 0; border-radius:3px;/*圆角*/ text-decoration:none;/*去a标签下划线*/ text-align:center;/*文字左右居中*/ line-height:30px;/*文字上下居中*/ font-size:14px;color:#FFF;}/*字体大小颜色*/ .send .s_txt{width:400px;height: 26px; border:1px solid #E1E1E1; outline: none; position: absolute; top:4px;left: 97px;} </style> </head> <body> <div class="box"> <h1>DM system</h1> <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> <a class="s_dm" href="javascript:void(0)">弹幕</a> <!-- 弹幕开始--> <div class="dm"> <a href="javascript:void(0)" class="e_dm">X</a> <div class="dm_show" > <div>未来会变得更好</div> <div>越努力越幸运</div> <div>微笑面对生活</div> <div>脚踏实地</div> <div>沉淀蜕变</div> <div>远离浮躁</div> </dm> </div> <!-- 弹幕结束--> <!-------------------接上一步----------------------> <!--发送弹幕--> <div class="send"> <input type="text" class="s_txt"/> <a href="javascript:void(0)" class="s_btn">发表评论</a> </div> </div> </body></html>效果图： 
5. 使用Jquery设置动态页面，初始时开启弹幕按钮不显示，显示主体弹幕，主体弹幕右上角有关闭弹幕按钮，点击时弹幕消失，显示弹幕开启按钮，点击弹幕开启按钮时，自身消失，弹幕显示。
则开启弹幕按钮与弹幕状态相反，切换时一个显示一个不显示
弹幕实现动态展示，每一个弹幕记录从不同高度，以不同的速度，随机的颜色，从右向左移动
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width:1000px; /*设置宽度1000px*/ text-align:center;/*内容居中*/ margin:0 auto;/*div盒子居中*/ position: relative; border:1px solid red; } h1{ color:white;/*颜色*/ text-shadow:2px 2px 5px #000;/*文字阴影*/ } .dm{width:800px;height:474px; background:rgba(41,31,31,0);/*颜色透明*/ margin:0 auto;/*居中显示*/ position: absolute;/*相对dm*/ top:60px;left:100px; z-index: 11;/*层叠*/ } .dm_show{color:white;position: relative;}/*弹幕内容*/ .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px} .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100; border-radius:20px;/*圆角*/ text-decoration:none}/*去除超链接下划线*/ .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff; position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100; border-radius:20px;text-decoration:none;} /*-------------------接上一步---------------*/ .send{ width:600px; height: 40px; position: absolute; top:517px; left: 10px; margin: 0 auto; } .send .s_btn{ width:82px;height:30px; display:block;/*设置为块级元素*/ background:#ff8140; float:right;/*右滑动*/ margin:4px 20px 0 0; border-radius:3px;/*圆角*/ text-decoration:none;/*去a标签下划线*/ text-align:center;/*文字左右居中*/ line-height:30px;/*文字上下居中*/ font-size:14px;color:#FFF;}/*字体大小颜色*/ .send .s_txt{width:400px;height: 26px; border:1px solid #E1E1E1; outline: none; position: absolute; top:4px;left: 97px;} </style> </head> <body> <div class="box"> <h1>DM system</h1> <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> <a class="s_dm" href="javascript:void(0)">弹幕</a> <!-- 弹幕开始--> <div class="dm"> <a href="javascript:void(0)" class="e_dm">X</a> <div class="dm_show" > <div>未来会变得更好</div> <div>越努力越幸运</div> <div>微笑面对生活</div> <div>脚踏实地</div> <div>沉淀蜕变</div> <div>远离浮躁</div> </dm> </div> <!-- 弹幕结束--> <!--发送弹幕--> <div class="send"> <input type="text" class="s_txt"/> <a href="javascript:void(0)" class="s_btn">发表评论</a> </div> </div> <!-------------------接上一步----------------------> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".s_dm").toggle();//初始化时不显示开启弹幕按钮，弹幕是打开的 $(".s_dm").click(function(){ $(".dm,.s_dm").toggle("slow");//点击时开启弹幕按钮和弹幕同时切换状态，且它们状态相反 }) $(".e_dm").click(function(){ $(".dm,.s_dm").toggle("slow");//点击时开启弹幕按钮和弹幕同时切换状态，且它们状态相反 }) init_screen();//初始化弹幕 $(".s_btn").click(function(){ //单击发送弹幕时，内容加入到弹幕 var value=$(".s_txt").val(); var tmpDiv=$("<div>"+value+"</div>"); $(".dm_show").append(tmpDiv); init_screen(); //发送新的内容重新初始化弹幕 }); //初始化屏幕 function init_screen(){ var _top=0; $(".dm_show").find("div").show().each(function(){//获取每一个弹幕内容div _top=_top+76; //每一个比上一个距离增加76 if(_top>=$(".dm").height()-100){//弹幕内容超出弹幕 _top=0; //重新到回到顶部 } //div的left var _left=$(".dm").width()-$(this).width();//可移动的正距离 //设置文字的初始位置 随机颜色 $(this).css({left:_left,top:_top,color:getRandomColor()}); //让每个div时间不一样 var time=Math.ceil(800+Math.random()*10000); //动起来 $(this).animate({left:"-"+_left+"px"},time,function(){ $(this).remove(); }); }) } }); function getRandomColor(){//随机颜色 var str=Math.ceil(Math.random()*16777215).toString(16); while(str.length<6){ str='0'+str; } return "#"+str; } </script> </body></html>阅读全文
1 0
- 仿视频弹幕实战
- 视频弹幕
- 【Android实战】弹幕效果
- 视频弹幕插件
- 视频直播的弹幕
- 视频弹幕开源库
- 视频弹幕Demo
- 仿QQ歌词弹幕控件
- 弹幕视频软件爆点TV弹幕视频常见问题集锦
- 基于ijkplayer的视频播放器，仿Bilibili客户端，集成沉浸式全屏、弹幕、触屏控制、视频源切换等功能
- 弹幕视频社交时代：如何玩转弹幕文化
- 简单的视频弹幕功能实现
- python3 爬取B站视频弹幕
- 弹幕
- 弹幕
- 弹幕
- 弹幕
- 哔哩哔哩弹幕视频网 -- bilibili 和 AcFun弹幕视频网 - 的 介绍
- 使用ibd文件恢复innodb数据
- 0728 Java循环语句练习-购物单
- Struct 2.5 使用通配符提示无法映射问题
- QT查找监控FTP
- 1+2.Hello，python--17/7/29
- 仿视频弹幕实战
- HDU 6048 思维+找规律
- java类加载器 -- 双亲委托机制
- Find MaxXorSum NBUT
- 洛谷3366 最小生成树（Prim + 堆优化）
- TreeControl控件的使用(一)
- QByteArray
- C语言实现C++的继承和多态
- F
