基于jquery实现弹幕效果


Posted in Javascript onSeptember 29, 2016

用jquery写的一个弹幕,供大家参考,具体内容如下

效果图:

基于jquery实现弹幕效果

源码:

<html> 
 
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- 
 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 
 --> 
  <meta name="Generator" content="EditPlus®"> 
  <meta name="Author" content=""> 
  <meta name="Keywords" content=""> 
  <meta name="Description" content=""> 
  <title>JQuery弹幕</title> 
  <link href="" rel="stylesheet" /> 
   
  </script> 
  <style type="text/css"> 
   body { 
    overflow: hidden; 
   } 
    
   .content { 
    overflow: hidden; 
   } 
    
   .ctxt { 
    background: burlywood; 
    width: 100%; 
    overflow: hidden; 
    margin: 0 auto; 
    z-index: 9999; 
   } 
    
   .ctxt p { 
     
    left: 95%; 
    margin: 0; 
    padding: 0; 
    z-index: 99; 
    overflow: hidden; 
   } 
    
   #msg{ 
    height: 24px; 
    width: 200px; 
   } 
    
   #barrage { 
    color: gainsboro; 
    border: 1px solid aqua; 
    font-size: 12px; 
    border-radius: 10px; 
    float: right; 
   } 
    
   #style { 
    margin-top: 10px; 
   } 
    
   #publish { 
    display: none; 
   } 
    
   video { 
    
    width: 100%; 
    overflow: hidden; 
    z-index: -99999; 
   } 
    
   #danmu { 
    position: absolute; 
    overflow: hidden; 
    font-size:20px; 
   } 
  </style> 
 </head> 
 
 <body> 
  <div class="content"> 
 
   <div id="" class="ctxt"> 
    <video id="vodio" autoplay="autoplay"> 
     <source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4"> 
     </source> 
 
    </video> 
   </div> 
 
   <div id="style"> 
    <button id="barrage"> <font style="color: white;">开始弹幕</font></button> 
    <div id="publish"> 
     <form method="post" align="center"> 
      <input type="text" id="msg" /> 
      <button type="button" id="submitBut">发布</button> 
     </form> 
    </div> 
 
   </div> 
  </div> 
   <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> 
  <script type="text/javascript"> 
   $(document).ready(function() { 
    $("#barrage").click(function() { 
     $("#publish").toggle(); 
    }); 
      
    $("#submitBut").click(function() { 
 
     var msgtxt = $("#msg").val(); 
     
     var colortxt = getReandomColor(); 
     var topPos = generateMixed(3); 
      
     if(topPos > 500) { 
      topPos = 30; 
     } 
     var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>'; 
     $(".ctxt").prepend(newtxt); 
     var addTextW = $(".ctxt").find("p").width(); 
     $(".ctxt p").animate({ 
      left: '-' + addTextW + 20 + "px" 
     }, 30000, function() { 
      $(this).hide(); 
     }); 
     $("#msg").val(" "); 
    }); 
 
   }); 
   //随机获取颜色值 
   function getReandomColor() { 
    return '#' + (function(h) { 
     return new Array(7 - h.length).join("0") + h 
    })((Math.random() * 0x1000000 << 0).toString(16)) 
   } 
 
   //生成随机数据。n表示位数  
   var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; 
 
   function generateMixed(n) { 
    var res = ""; 
    for(var i = 0; i < n; i++) { 
     var id = Math.ceil(Math.random() * 9); 
     res += jschars[id]; 
    } 
    return res; 
   } 
  </script> 
 
 </body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
js获取Get值的方法
Sep 29 #Javascript
js带闹铃功能的倒计时代码
Sep 29 #Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
聊一聊JS中的prototype
Sep 29 #Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
一个简单计数器的源代码
2006/10/09 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
请假条范文大全
2014/04/10 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Python中三种花式打印的示例详解
2022/03/19 Python