JS透明度动画：<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#mainBody {
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
}
</style>
</head>
<body>
<div id='mainBody'>
</div>
<script>
var oDiv = document.getElementById('mainBody');
window.onload = function() {
oDiv.onmouseover = function() {
startMove(100);
}
oDiv.onmouseout = function() {
startMove(30);
}
}
var timer = null;
var opacityE = 30;
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if (opacityE > iTarget) {
speed = -5;
}
else {
speed = 5;
}
if (opacityE == iTarget) {
clearInterval(timer);
}
else {
opacityE += speed;
oDiv.style.opacity = opacityE/100;
}
},20)
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消