基于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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
javascript编程起步(第四课)
Jan 10 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
微信小程序 本地数据读取实例
Apr 27 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
Python实现批量下载图片的方法
2015/07/08 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python实现月食效果实例代码
2019/06/18 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
品质口号大全
2014/06/17 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
起诉状范本
2015/05/20 职场文书
看雷锋电影观后感
2015/06/10 职场文书
中秋节随笔
2015/08/15 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL