js弹幕

浏览数：94 / 时间：2015年06月09日

<!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弹幕