js弹幕

时间：2015-05-14 18:41:48 阅读：143 评论：0 收藏：0 [点我收藏+]

标签：

<!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;
}

#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 id="play">
<div id="tangmu">
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
檀木
红米
大妈
</div>
</div>


<script src="js/jquery-1.7.2.min.js"></script>
<script>

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>

js弹幕

标签：

原文地址：http://blog.csdn.net/wangzhiqiang123456/article/details/45724477

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行