jQuery-弹幕
該方法可能有bug，畢竟簡單粗暴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.video {
margin: 50px auto 10px auto;
width: 500px;
height: 500px;
border: 1px solid pink;
}
.btn {
width: 40px;
height: 25px;
background: #26d4bd;
color: #fff;
border: none;
outline: none;
}
.active{
width: 65px;
background: red;
}
.box{
margin: 0px auto;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="video" id="video"></div>
<div class="box">
<input type="text" id="text"/> <button type="button" id="btn" class="btn">發送</button>
<button type="button" id="clear" class="btn active">清空彈幕</button>
</div>
<script>
$("#btn").click(function(){
$("#video").append('<marquee behavior="scroll" direction="left" loop="1" scrollamount="100" scrolldelay="500">' $("#text").val() '</marquee>')
$("#text").val("")
})
$("#clear").click(function(){
$("#video").empty()
})
</script>
</body>
</html>
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： MapXtreme2008中操作矢量符号
- 下一篇： 跨域方式