<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#msg{
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
right:0;
bottom: -200px;
}
</style>
</head>
<body>
<div id="msg">
<a href="#">X</a>
</div>
<script>
var adv={
DISTANCE:0,//总距离：动态获得adv的高
DURATION:2000,//总时间
STEPS:400,//总步数
step:0,//步长
interval:0,
div:null,
timer:null,
moved:0,//已经移动的步数
WAIT:3000,//下移结束后，等待上移的时间
init(){
this.div=document.getElementById("msg");
this.DISTANCE=parseFloat(getComputedStyle(this.div).height);
this.step=this.DISTANCE/this.STEPS;
this.interval=this.DURATION/this.STEPS;
this.move(1);
this.div.firstElementChild.οnclick=this.move.bind(this,-1);
},
move(dir){
this.timer=setInterval(this.moveStep.bind(this,dir),this.interval);
},
moveStep(dir){
var bottom=parseFloat(getComputedStyle(this.div).bottom)
this.div.style.bottom=bottom+dir*this.step+"px";
this.moved++;
if (this.moved==this.STEPS) {
clearInterval(this.timer);
this.timer=null;
this.moved=0;
//实现循环植入
/*if(dir==-1){
setTimeout(this.move.bind(this,1),this.WAIT);
}*/
}
}
}
adv.init();
</script>
</body>
</html>
3764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
