js弹幕
来源:互联网 发布:appserv 更改端口号 编辑:程序博客网 时间:2024/04/30 07:56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>javascript弹幕</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#play{
width:600px;
height:200px;
background-color:#000;
position:fixed;
top:500px;
}
#tangmu{
width:600px;
height:200px;
background-color:#fff;
z-index:9999;
background-color: rgba(000, 1, 000, 0.1);
position:fixed;
top:500px;
}
.tmf{
position:absolute;
font-size:24px;
color:#fff;
height:24px;
}
</style>
</head>
<body>
<input id="dc" type="text" />
<textarea id="dci"></textarea>
<div id="play">
<div id="tangmu">
<font class="tmf" id="t1" >檀木1</font>
<font class="tmf" id="t2">红米2</font>
<font class="tmf" id="t3" >大妈3</font>
<font class="tmf" id="t4" >檀木4</font>
<font class="tmf" id="t5">红米5</font>
<font class="tmf" id="t6" >大妈6</font>
<font class="tmf" id="t7" >檀木7</font>
<font class="tmf" id="t8">红米8</font>
<font class="tmf" id="t9" >大妈9</font>
<font class="tmf" id="t10" >檀木10</font>
<font class="tmf" id="t11">红米11</font>
<font class="tmf" id="t12" >大妈12</font>
<font class="tmf" id="t13" >檀木13</font>
<font class="tmf" id="t14">红米14</font>
<font class="tmf" id="t15" >大妈15</font>
<font class="tmf" id="t16" >檀木16</font>
<font class="tmf" id="t17">红米17</font>
<font class="tmf" id="t18" >大妈18</font>
<font class="tmf" id="t19" >檀木19</font>
<font class="tmf" id="t20">红米20</font>
<font class="tmf" id="t21" >大妈21</font>
<font class="tmf" id="t22" >檀木22</font>
<font class="tmf" id="t23">红米23</font>
<font class="tmf" id="t24" >大妈24</font>
<font class="tmf" id="t25" >檀木25</font>
<font class="tmf" id="t26">红米26</font>
<font class="tmf" id="t27" >大妈27</font>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
var tmfz=(function(fjid,itemclass,hdjgtime,sdhd,pzise,isrb,callback){
var jgtime = 0;
var tangmuf = document.getElementById(fjid);
var pindex=1;
istop = 0;
var maxtime = 0;
//使用return 返回外部可调用的函数
return {
tm:function() {
tmstar();
}};
function tmstar() {
jgtime = 0;
var hdcd = $("." + itemclass).length;
$("#dc").val(hdcd + "*" + ((pindex - 1) * pzise) + "*" + (pzise * pindex));
for(var i=((pindex-1)*pzise);i<(pzise*pindex);i++)
{
if(i<hdcd)
{
tangmu($("." + itemclass).eq(i).attr("id"));
}
else
{ break;}
}
}
function tangmu(id) {
var mathHeight = Math.round(Math.random()*(tangmuf.offsetHeight))+"px";
var textLeft=tangmuf.offsetWidth+"px";
var textStyleObj = document.getElementById(id);
textStyleObj.style.marginLeft = textLeft;
if (Number(mathHeight.replace("px","")) > (tangmuf.offsetHeight - textStyleObj.offsetHeight)) {
mathHeight = (tangmuf.offsetHeight - textStyleObj.offsetHeight)+"px";
}
textStyleObj.style.marginTop = mathHeight;
var dhsj= ((tangmuf.offsetWidth+100)/sdhd);
setTimeout(function () {
if ($("#" + id).index() == $("." + itemclass).length - 1||$("#" + id).index()==(pzise*pindex)-1)
{
var kaitime = 0;
if (pzise >= $("." + itemclass).length) {
}
else {
kaitime = dhsj * 0.3;
setTimeout(function () {
if (istop == 0) {
if (isrb || (!isrb && $("#" + id).index() != $("." + itemclass).length - 1)) {
if ($("#" + id).index() == $("." + itemclass).length - 1)
{ pindex = 1; }
else
{ pindex++; }
tmstar();
}
}
}, kaitime);
}
$("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" },dhsj, function () {
if (typeof (callback) != "undefined" && $("#" + id).index() == $("." + itemclass).length - 1)
{ callback(); }
if (pzise >= $("." + itemclass).length) {
pindex = 1;
tmstar();
}
});
}
else
{ $("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" }, dhsj); }
}, jgtime);
jgtime = jgtime + hdjgtime;
}
});
// 夫级id;子集class;弹幕间隔时间;滑动速度,值越大越快;每次出现的弹幕个数;是否循环轮播此组数据; 此组所有弹幕完成后回调函数,当 是否循环轮播 为 false 时才会生效
tmfz("tangmu","tmf",500,0.1,10,true,function(){
//回调函数,最后一个触发
//强制停止
//istop=1;
}).tm();//传递参数
</script>
</body>
</html>
<html>
<head>
<title>javascript弹幕</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#play{
width:600px;
height:200px;
background-color:#000;
position:fixed;
top:500px;
}
#tangmu{
width:600px;
height:200px;
background-color:#fff;
z-index:9999;
background-color: rgba(000, 1, 000, 0.1);
position:fixed;
top:500px;
}
.tmf{
position:absolute;
font-size:24px;
color:#fff;
height:24px;
}
</style>
</head>
<body>
<input id="dc" type="text" />
<textarea id="dci"></textarea>
<div id="play">
<div id="tangmu">
<font class="tmf" id="t1" >檀木1</font>
<font class="tmf" id="t2">红米2</font>
<font class="tmf" id="t3" >大妈3</font>
<font class="tmf" id="t4" >檀木4</font>
<font class="tmf" id="t5">红米5</font>
<font class="tmf" id="t6" >大妈6</font>
<font class="tmf" id="t7" >檀木7</font>
<font class="tmf" id="t8">红米8</font>
<font class="tmf" id="t9" >大妈9</font>
<font class="tmf" id="t10" >檀木10</font>
<font class="tmf" id="t11">红米11</font>
<font class="tmf" id="t12" >大妈12</font>
<font class="tmf" id="t13" >檀木13</font>
<font class="tmf" id="t14">红米14</font>
<font class="tmf" id="t15" >大妈15</font>
<font class="tmf" id="t16" >檀木16</font>
<font class="tmf" id="t17">红米17</font>
<font class="tmf" id="t18" >大妈18</font>
<font class="tmf" id="t19" >檀木19</font>
<font class="tmf" id="t20">红米20</font>
<font class="tmf" id="t21" >大妈21</font>
<font class="tmf" id="t22" >檀木22</font>
<font class="tmf" id="t23">红米23</font>
<font class="tmf" id="t24" >大妈24</font>
<font class="tmf" id="t25" >檀木25</font>
<font class="tmf" id="t26">红米26</font>
<font class="tmf" id="t27" >大妈27</font>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
var tmfz=(function(fjid,itemclass,hdjgtime,sdhd,pzise,isrb,callback){
var jgtime = 0;
var tangmuf = document.getElementById(fjid);
var pindex=1;
istop = 0;
var maxtime = 0;
//使用return 返回外部可调用的函数
return {
tm:function() {
tmstar();
}};
function tmstar() {
jgtime = 0;
var hdcd = $("." + itemclass).length;
$("#dc").val(hdcd + "*" + ((pindex - 1) * pzise) + "*" + (pzise * pindex));
for(var i=((pindex-1)*pzise);i<(pzise*pindex);i++)
{
if(i<hdcd)
{
tangmu($("." + itemclass).eq(i).attr("id"));
}
else
{ break;}
}
}
function tangmu(id) {
var mathHeight = Math.round(Math.random()*(tangmuf.offsetHeight))+"px";
var textLeft=tangmuf.offsetWidth+"px";
var textStyleObj = document.getElementById(id);
textStyleObj.style.marginLeft = textLeft;
if (Number(mathHeight.replace("px","")) > (tangmuf.offsetHeight - textStyleObj.offsetHeight)) {
mathHeight = (tangmuf.offsetHeight - textStyleObj.offsetHeight)+"px";
}
textStyleObj.style.marginTop = mathHeight;
var dhsj= ((tangmuf.offsetWidth+100)/sdhd);
setTimeout(function () {
if ($("#" + id).index() == $("." + itemclass).length - 1||$("#" + id).index()==(pzise*pindex)-1)
{
var kaitime = 0;
if (pzise >= $("." + itemclass).length) {
}
else {
kaitime = dhsj * 0.3;
setTimeout(function () {
if (istop == 0) {
if (isrb || (!isrb && $("#" + id).index() != $("." + itemclass).length - 1)) {
if ($("#" + id).index() == $("." + itemclass).length - 1)
{ pindex = 1; }
else
{ pindex++; }
tmstar();
}
}
}, kaitime);
}
$("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" },dhsj, function () {
if (typeof (callback) != "undefined" && $("#" + id).index() == $("." + itemclass).length - 1)
{ callback(); }
if (pzise >= $("." + itemclass).length) {
pindex = 1;
tmstar();
}
});
}
else
{ $("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" }, dhsj); }
}, jgtime);
jgtime = jgtime + hdjgtime;
}
});
// 夫级id;子集class;弹幕间隔时间;滑动速度,值越大越快;每次出现的弹幕个数;是否循环轮播此组数据; 此组所有弹幕完成后回调函数,当 是否循环轮播 为 false 时才会生效
tmfz("tangmu","tmf",500,0.1,10,true,function(){
//回调函数,最后一个触发
//强制停止
//istop=1;
}).tm();//传递参数
</script>
</body>
</html>
0 0
- js弹幕
- JS--实现弹幕效果
- JS弹幕实现
- js 实现简单的弹幕
- 纯js 实现弹幕效果
- js弹幕效果_js弹幕滚动_源代码_写法!
- 弹幕
- 弹幕
- 弹幕
- 弹幕
- 网页弹幕实现(PHP+JS)
- 原生js写的斗鱼弹幕
- JS初学者使用jQuery开发一款弹幕射击游戏
- 关于 js自制多屏同步弹幕 原理的分析
- 利用Video.js与jquery.danmu.js实现一个弹幕播放器
- 弹幕效果
- 弹幕实现
- 弹幕技术
- 版本控制(6)-- Git常用命令演示
- OpenCV源码阅读(3)---base.hpp
- Lectora
- Hibernate HQL like
- Toast工具、字符串校验
- js弹幕
- Python 中添加 path 环境变量
- [MapReduce]MapReduce调试:在DataNode节点上查看打印信息
- scorm 标准课件功能测试与演示
- 黑马程序员--ios基础--oc-foundation--NSString,NSArray与计算代码行数的练习
- 版本控制(7)--TortoiseGit冲突和补丁演示
- jeecg联合查询操作?
- 转广州的士票 广州加油票 广州出租车票
- scorm标准的课程设计