弹幕效果

最新推荐文章于 2024-05-04 21:12:47 发布

端脑

最新推荐文章于 2024-05-04 21:12:47 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103546320

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

弹幕效果

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
		#box{ width: 542px; height: 330px;
		border: 3px solid goldenrod;
		margin-left:300px;}
	   #btm{margin: 0;padding: 0; height: 30px;background: goldenrod;
	   display: flex; z-index: 999; position: relative; }
	   #btm span{ flex: 1; flex-direction: column;font: 16px/30px "微软雅黑";
	   color: #fff;  text-align: center; cursor: pointer;}
	   #btm span:nth-child(1){ flex: 3;}
	   #btm span input{ width:100% ; height: 30px; font: 16px/30px "微软雅黑";
	   border: none; outline: none;}
	   #content{ height: 300px; position: relative; z-index: 999;
	   background:rgba(0,0,0,0.7)}
	   #content span{color:#fff; height: 30px; font: 14px/30px "微软雅黑"; position: absolute;left:542px;
	   white-space: nowrap;}
	   #v{ position: absolute;
	   left: 303px; top: -32px; width: 542px; height: 358px; background: url(2.png);}
	</style>
	 
	
</head>
<body>
	<div id="box">
		<div id="content"></div>
		<p id="btm">
			<span><input type="text" id="text" /></span>
			<span id="sendCon">发送</span>
			<span id="hideCon">隐藏</span>
			<span id="showCon">显示</span>
		</p>
	</div>
	<div id="v">
		 
	</div>
	<script src="sport.js"></script>
	<script>
		var sendCon = document.getElementById("sendCon");
		var text = document.getElementById("text");
		var content = document.getElementById("content");
		sendCon.onclick = function() {
            var val = text.value;
			var oSpan = document.createElement("span");
			oSpan.innerHTML = val;
			// 随机产生一个数 表示文字元素的top值 0-270
			var num = parseInt(Math.random()*271);
			oSpan.style.top = num + "px";
			content.appendChild(oSpan);
			var target = -oSpan.offsetWidth;
            startMove(oSpan,{left: target}, function() {
				oSpan.remove();
			})
		}
	</script>
</body>
</html>

sport.js

function startMove(obj,json,fn){  //  {"width":300,"height":300}
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
				var flag = true;// 当开关变量的值为 true时，运动结束，可以停止定时器了		
				for(var attr in json){		
					var current = 0;
					if(attr == "opacity"){
						//操作透明度
						current = parseFloat( getStyle( obj,attr ) ) * 100;
					}else if( attr == "zIndex" ){
						current = parseInt( getStyle(obj,attr) );//操作空间定位
					}else{
						
						//操作的是带有像素值的样式
						current = parseInt( getStyle(obj,attr) );//获取当前操作对象的实际值
					}
					var speed = (json[attr] - current) > 0 ? 1 : -1;
					//speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
					if( json[attr] != current ){
						//如果目标值 和 当前操作的样式值不相等，就不能停止定时器 
						flag = false;				
					}
					//上面的条件不满足  继续执行运动
					if(attr == "opacity"){
						//操作透明度
						obj.style.opacity = (current + speed) / 100;
					}else if(attr == "zIndex"){
						
						obj.style.zIndex = json[attr] ;
						
					}else{
						//操作的是带有像素值的样式
						obj.style[attr] = current + speed + "px";
						 
					}		
				}		
				//如果flag为true   就停止定时器		
				if(flag){
					clearInterval(obj.timer);
					//一个动作完成后,进入下一个动作(也就是要调用下一个函数)
					if(fn){ //判断如果有函数传递过来，就调用
						fn();
					}
				}
				
			},10)
		}
		function getStyle(obj,attr){
			return window.getComputedStyle ? window.getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
		}

返回目录

端脑

关注

0
点赞
踩
1

收藏

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

弹幕效果<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;} #box{ ...
复制链接

扫一扫

专栏目录