07js动画实现的模拟弹幕的案例
2019-03-12 本文已影响0人
An的杂货铺
<!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>
function $(id){
return document.getElementById(id)
}
$('sendCon').onclick = function(){
var text = $('text').value;
var ospan = document.createElement('span');
ospan.innerText = text;
$('content').appendChild(ospan);
var target = -ospan.offsetWidth;
var Top = Math.random()*270+'px';
ospan.style.top = Top;
startMove(ospan,{'left':target},function(){
ospan.remove();
});
}
$('hideCon').onclick = function(){
var ospans = $('content').getElementsByTagName('span');
for(var i = 0;i<ospans.length;i++){
ospans[i].style.display = 'none';
}
}
$('showCon').onclick = function(){
var ospans = $('content').getElementsByTagName('span');
for(var i = 0;i<ospans.length;i++){
ospans[i].style.display = 'block';
}
}
</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"){
//操作透明度
debugger;
current = parseFloat( getStyle( obj,attr ) ) * 100;
console.log(current);
}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 = current+speed;
}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];
}
效果如下图
image.png
