基于jquery实现弹幕效果
用js写的一个弹幕
效果图：
源码：
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现的弹幕效果完整实例
本文实例讲述了jQuery实现的弹幕效果.分享给大家供大家参考,具体如下: 看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现. 先来看看运行效果: 下面将整个代码显示出来: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</title> <st
-
基于jQuery实现弹幕APP
今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo
-
JQuery和HTML5 Canvas实现弹幕效果
JQuery和HTML5 Canvas两种方法实现弹幕效果: 方法一,JQuery实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
-
终于实现了!精彩的jquery弹幕效果
本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下 页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
简单实现jQuery弹幕效果
在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素
-
又一枚精彩的弹幕效果jQuery实现
简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di
-
jQuery实现弹幕效果
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;
-
基于jquery实现弹幕效果
用js写的一个弹幕 效果图: 源码: <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"&
-
基于jquery实现放大镜效果
各大商城详细页面产品图片特效展示,鼠标滑过小图显示中图,鼠标滑过中图显示大图展示,jquery放大镜效果图片类似图片放大镜展示,提高用户体验设计,jquery 图片放大镜效果是典型的一款图片特效展示. 效果图如下: 图片大框初始样式: <div class="goods-imginfo-bimg-box" style="background-image: url(http://www.od.my/images/201507/thumb_img/142_thumb_P_1
-
基于jquery的loading效果实现代码
在代码<head></head>里加入以下代码: <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script> 在里<bo
-
jQuery实现弹幕效果案例
本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
-
基于WPF实现弹幕效果的示例代码
WPF 实现弹幕效果 框架使用大于等于.NET40: Visual Studio 2022; 项目使用 MIT 开源许可协议: 此篇代码目的只是为了分享思路 实现基础弹幕一定是要使用Canvas比较简单,只需实现Left动画从右到左. 弹幕消息使用Border做弹幕背景. 内容使用TextBlock做消息文本展示. 当动画执行完成默认移除Canvas中的弹幕控件. 使用这种方式去加载弹幕GPU会占较高. 1) 准备BarrageExample.xaml如下: <UserControl x:Cla
-
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球. Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示 Vertical Sliding Accordi
-
推荐6款基于jQuery实现图片效果插件
1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于
-
基于jquery实现日历效果
本文实例为大家分享了jquery实现日历效果的具体代码,供大家参考,具体内容如下 /** * 2021/3/6 * Calendar */ /* get y Year m Month before days */ function getBDays( y, m ) { return (new Date(y, m, 1).getDay()); } /* get y Year m Month total days */ function getTDays( y, m ) { return (new
-
11个用于提高排版水平的基于jquery的文字效果插件
排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+