<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 200px;
top: 200px;
opacity: .3;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById('box');
box.onmouseover = function(){
animate(box,1)
}
box.onmouseout = function(){
animate(box,0.3)
}
var timer;
var alpha =0.3;
function animate(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = target - alpha > 0 ? 0.01: - 0.01;
if(alpha == target){
clearInterval(timer);
}else{
alpha+=speed;
obj.style.opacity = alpha;
}
},30)
}
</script>
匀速运动操作透明度
最新推荐文章于 2021-09-09 09:47:43 发布