<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
#box{width: 300px;height: 300px;background: red;display: flex;position: absolute;left: -250px;top: 100px;}
p{width: 250px;height: 300px;font-size: 24px;text-indent: 2em;}
span{display: block;width: 50px;height: 300px;background: green;font-size: 40px;cursor: pointer;}
</style>
<script src="startMove.js"type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<p>哈迪斯撒娇是的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎打火锅的萨达化</p>
<span id="span1">侧边栏=》</span>
</div>
<script type="text/javascript">
var oSpan=document.getElementById("span1");
var oBox =document.getElementById("box");
var timer=null;
oBox.onmouseover=function(){
startMove(oBox,{left:0});
}
oBox.onmouseout=function(){
startMove(oBox,{left:-250})
}
</script>
</body>
</html>
startMove.js的封装
var timer=null;
function startMove(obj,json,fn){
clearInterval(timer);
timer =setInterval(function(){
var flag=true; //假设全部为真
for(let attr in json){ //遍历对象
if(attr =="opacity"){
var cur1 =parseInt(getStyle(obj,"opacity")*100)
}else{
var cur1 =parseInt(getStyle(obj,attr));
}
target1=json[attr];
speed= (target1-cur1)/6; //减速运动
var speed=speed>0?Math.ceil(speed):Math.floor(speed); //判断speed的正负值
if(attr == "opacity"){
obj.style.opacity = (cur1+speed)/100;
obj.style.filter = "alpha(opacity="+(cur1+speed)+")";
}else{
obj.style[attr]=cur1+speed+"px";
}
//console.log(cur1)
if(target1!=cur1){ //判断若有一处未完成 ，flag为假
flag=false;
}
}
if(flag){
clearInterval(timer);
if(fn){
fn();
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){ //支持IE
return obj.currentStyle[attr]
}else{ //不支持IE
return getComputedStyle(obj,null)[attr]
}
}