<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#box1{
width: 150px;height: 60px;position: relative;left: -100px;position: fixed;top: 50%;left: 50%;opacity:0.2
}
#box01{
width: 100px;height: 60px;float: left;background: red;
}
#box02{
width: 50px;height: 60px;background: yellow;float: left;
}
</style>
<script type="text/javascript">
window.onload=function(){
var obox1=document.getElementById("box1");
obox1.onmousemove=function(){
donhua(1.0);
}
obox1.onmouseout=function(){
donhua(0.2);
}
}
var timer=null,
toumin=0.2;
function donhua(shuru)
{
var obox1=document.getElementById("box1");
clearInterval(timer);
timer=setInterval(function(){
var sudu=0;
if(toumin<shuru){sudu=0.1}
else if(toumin>shuru) {sudu=-0.1}
if(toumin==shuru){clearInterval(timer)}
else {toumin+=sudu;
obox1.style.opacity=toumin;}
},30)
}
</script>
</head>
<body>
<div id="box1">
<div id="box01"></div>
<div id="box02"></div>
</div>
</body>
</html>慕莱坞9220042
相关分类