js弹幕

最新推荐文章于 2023-01-18 13:11:12 发布

隅寒

最新推荐文章于 2023-01-18 13:11:12 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/qq_41881409/article/details/104903956

版权

在这里插入图片描述

一、功能

1.鼠标点击发送

2.键盘enter发送

3.隐藏：将运动的消息隐藏背景图片亮度增强

4.显示：弹幕继续向前运动背景图片变模糊

二、源代码

<body>
	<div id = "box">
	<div id= "content"></div>
	<p id = "btm">
	    <span><input type= "text" id="text"/></span>
		<span id ="sendCon">send</span>
		<span id ="hideCon">hide</span>
		<span id ="showCon">show</span>
	</p>
	</div>
	<div id="v">
	</div>
	</body>
</html>
<script src="sport.js"></script>
<script src="text/javascript">
//发送消息
	function $(id){
		return document.getElementById(id);
	}
	function sendMessage(){
		var oSpan = document.createElement("span");
		oSpan.innerHTML = $("text").value;
		$("content").appendChild(oSpan);
		oSpan.style.top = Math.floor.(Math.random()*280)+"px";
		var oSpanWidth = oSpan.offsetWidth;
		startMove(oSpan,{"left":-oSpanWidth},function(){
		oSpan.remove();	
		})
		$("text").value = "";
	}
//鼠标点击发送
$("sendCon").onclick = function(){
	sendMessage();
}
//键盘enter发送
document.onkeydown = function(e){
	var e = e|| event;//实现浏览器兼容
	if(e.keyCode = 13){
		sendMessage();
	}
}
//隐藏：将运动的消息隐藏 背景图片亮度增强
$("hideCon").onclick = function(){
	$("content").style.opacity = "0";//滤镜（完全透明）
	$("content").style.filter = 'alpha(opacity = 0)';//考虑兼容性问题
}
//显示：弹幕继续向前运动 背景图片变模糊
$("showCon").onclick = function(){
	$("content").style.opacity = "1";//滤镜（完全不透明）
	$("content").style.filter = 'alpha(opacity = 1)';//考虑兼容性问题
</script>

隅寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹幕

一、功能1.鼠标点击发送2.键盘enter发送3.隐藏：将运动的消息隐藏背景图片亮度增强4.显示：弹幕继续向前运动背景图片变模糊二、源代码<body> <div id = "box"> <div id= "content"></div> <p id = "btm"> <span><inp...
复制链接

扫一扫