js弹幕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>javascript弹幕</title>

<style>

#play{

width:600px;

height:200px;

background-color:#000;

}

#tangmu{

width:600px;

height:200px;

background-color:#fff;

z-index:9999;

background-color: rgba(000, 1, 000, 0.1);

}

.tmf{

position:absolute;

font-size:24px;

color:#fff;

height:24px;

}

</style>

</head>

<body>

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

檀木

红米

大妈

</div>

var times = 4000;//时间,定义速度

var hdjgtime = 500;//滑动间隔

var jgtime = 0;

var tmu = 1;

var fjid = "tangmu";//夫级id

var itemclass = "tmf";//子集class

function tm() {

times = 5000;

jgtime = 1000;

jgtime = 0;

$(".tmf").each(function () {

tangmu($(this).attr("id"));

});

}

tm();//页面初始调用

function tangmu(id){

var tangmu = document.getElementById(fjid);

var mathHeight = Math.round(Math.random()*(tangmu.offsetHeight))+"px";

var textLeft=tangmu.offsetWidth+"px";

var textStyleObj = document.getElementById(id);

textStyleObj.style.marginLeft = textLeft;

if (Number(mathHeight.replace("px","")) > (tangmu.offsetHeight - textStyleObj.offsetHeight)) {

mathHeight = (tangmu.offsetHeight - textStyleObj.offsetHeight)+"px";

}

textStyleObj.style.marginTop = mathHeight;

setTimeout(function () {

if ($("#" + id).index() == $("." + itemclass).length - 1)

{ $("#" + id).animate({ "margin-left": "-100px" }, times, function () { tm(); }); }

else

{ $("#" + id).animate({ "margin-left": "-100px" }, times); }

}, jgtime);

var tisj= Math.floor(Math.random() * 10 + 1);

jgtime = jgtime + hdjgtime;//每个追加一秒

}

</script>

</body>

</html>

时间： 2024-11-13 06:45:02

js弹幕的相关文章

JS弹幕代码分析

现在许多直播软件和视频都有弹幕功能,让我们来看看并分析是怎么实现的. 这边我主要分析下js的代码,想看源码的朋友送上链接,http://sandbox.xinfan.org/xdd... HTML代码如下(css代码就不展示了,想看的直接看源码吧): <div id="main" class="container"> 啦啦啦啦啦啦啦 <p class="p1&

用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

1,开始的思路公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就简单说下我的react弹幕折腾之路.一开始其实是两手空空,作为一个php的初级开发人员,我对前端技术掌握的很少,远不到熟练的程度.所以,我得从头学习如何用js+css实现弹幕,然后再将弹幕移植到react项目上去,这是我一开始的思路. 2,中间的折腾我百度了下"js 弹幕",发现大部分都

JS原生实现视频弹幕Demo（仿）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Js原生弹幕</title> <link rel="stylesheet" href=""&

js实现弹幕效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>js实现弹幕效果</title> <style> #play { width: 600px; height: 500px; background-color: #000; } /*方便js获取高度*/ #danmu{ width:600px

js利用节点，封装函数进行简单弹幕制作

js简单弹幕制作(注:简单弹幕从右向左执行,除了数字字母之外,汉字执行会出现出框是排列向下成一排清空状态(如下图),不必担心,简单弹幕的问题后续有说明和解决方案). 思路: 1.在输入框内输入值显示在显示区域里 2.发送完毕,输入框内清空 3.弹幕从右向左,且多行(可控) 4.性能优化处理(显示完毕清空弹幕,计时器) 效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8">

js实现弹幕（原创）

弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name=

利用js代码自动删除稿件的普通弹幕

事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通的弹幕,语言用的是javascript,在chrome的控制台就可以执行这个脚本. 1.删除弹幕的流程分析判断弹幕A是否为普通弹幕,是则选中. 点击删除弹幕的按钮,弹出二次确认框. 点击确定,成功删除. 2.删除弹幕相关的html代码,js代码 2.1 选中可通过判断class属性为"item-

聊天室和弹幕的js实现感觉没差

var hasLastCheckReturned = true; var lastCheckedTime = 0; setTimeout(function(){ if(!hasLastCheckReturned){ return; //上次还没返回结果.放弃这次请求. } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.responseCod

斗鱼刷弹幕js代码

对于一个网络喷子(like me)来说,喷人必须高效. var script=document.createElement("script"); script.type="text/javascript"; script.src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild