<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script>
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
let bStop=true;
let cur=0;
for(let attr in json){
if(attr=='opacity'){
cur=Math.round(parseFloat(getComputedStyle(obj,false)[attr])*100);
}else if(attr=='scrollTop'){
cur=obj[attr]
}
else{
cur=parseInt(getComputedStyle(obj,false)[attr])
}
if(cur!=json[attr])
bStop=false
let speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(attr=='opacity'){
obj.style.opacity=(cur+speed)/100
}else if(attr=='scrollTop'){
//火狐滚轮事件
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', function (ev) {
clearInterval(obj.timer)
}, false);
}
// chrome滚轮事件
obj.onmousewheel = function (ev) {
clearInterval(obj.timer)
};
if(speed==1)
speed=2;
else if(speed==-1)
speed=-2
obj[attr]=cur+speed;
}else{
obj.style[attr]=cur+speed+'px'
}
}
if(bStop){
if(fnEnd)
fnEnd();
clearInterval(obj.timer)
}
},30)
}
window.onload=function(){
startMove(document.documentElement, { scrollTop: 0 })
var oDiv=document.querySelector('div')
var oBtn=document.querySelector('input[type=button]')
oBtn.onclick=function(){
startMove(oDiv, { top: 300, left: 300, opacity: 0 })
startMove(document.documentElement, {scrollTop:500})
}
}
</script>
<body style="height:3000px;">
<div style="width:100px;height:100px;background:red;position:absolute;left:100px;top:0;"></div>
<input type="button" value="移动"/>
</body>
</html>
网友评论