<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
}
#box{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 200px;
left: 200px;
opacity: 0.3;
}
</style>
</head>
<body>
<div id="box" onmouseover="startMove(1)" onmouseout="startMove(0)">
</div>
</body>
</html>
<script type="text/javascript">
let box = document.getElementById("box");
let time = null;
function startMove(targat){
clearInterval(time);
time=setInterval(function(){
function getStyle(obj, attr) { //获取非行间样式,obj是对象,attr是值
//该条件含义为,判断该浏览器是否拥有该函数
if (obj.currentStyle) { //针对ie获取非行间样式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr]; //针对非ie
}
}
let speed = targat>getStyle(box,"opacity")?0.05:-0.05;
box.style.opacity = Number(getStyle(box,"opacity"))+speed;
},50)
}
</script>
js匀速透明运动
最新推荐文章于 2019-11-03 19:34:49 发布