<!--HTML
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-->
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title></title>
????<style>
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????#wrap{
????????????width:?200px;
????????????height:?100px;
????????????opacity:1;
????????????filter:?alpha(opacity:100);
????????????background-color:#7affdd;
????????}
????</style>
</head>
<script?src="JS--Animation-10.js"></script>
<body>
????<div?id="wrap"></div>
</body>
</html>
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
JavaScript
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/**
?*?Created?by?Administrator?on?2016/1/6.
?*/
window.onload=function(){
????var?div?=?document.getElementById('wrap');
????div.onmouseover=function(){
????????setMove(div,{width:500,height:400,opacity:.5});
????}
????div.onmouseout=function(){
????????setMove(div,{width:200,height:100});
????}
}
function?setMove(obj,json,fu){
????var?flas?=true;
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????for(var?sty?in?json){
????????????var?ico?=?0;
????????????if(sty=='opacity'){
????????????????ico?=?Math.random(parseFloat(setTmo(obj,sty))*100);
????????????}else{
????????????????ico?=?parseInt(setTmo(obj,sty));
????????????}
????????????var?speed?=?(json[sty]?-ico)/5;
????????????speed?=?speed>0??Math.ceil(speed):Math.floor(speed);
????????????if(json[sty]?!=ico){
????????????????flas?=false;
????????????}
????????????if(json[sty]=='opacity'){
????????????????obj.style.filter='alpha(opacity'+(ico+speed)+"px";
????????????????obj.style.opacity=(ico+speed)/100;
????????????}else{
????????????????obj.style[sty]=ico+speed+"px";
????????????}
????????????if(flas){
????????????????clearInterval(obj.timer);
????????????????if(fu){
????????????????????fu();
????????????????}
????????????}
????????}
????},30)
}
function?setTmo(obj,attr){
????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????}else{
????????return?getComputedStyle(obj,false)[attr];
????}
}
2016-01-08
window.onload=function(){ ????var?div?=?document.getElementById('wrap'); ????div.onmouseover=function(){ ????????setMove(div,{width:500,height:400,opacity:50}); ????} ????div.onmouseout=function(){ ????????setMove(div,{width:200,height:100,opacity:100}); ????} } function?setMove(obj,json,fu){ ????clearInterval(obj.timer); ????obj.timer=setInterval(function(){ ????????var?flas?=true; ????????for(var?sty?in?json){ ????????????var?ico?=?0; ????????????if(sty=='opacity'){ ????????????????ico?=?Math.round(parseFloat(setTmo(obj,sty))*100); ????????????}else{ ????????????????ico?=?parseInt(setTmo(obj,sty)); ????????????} ????????????var?speed?=?(json[sty]?-ico)/5; ????????????speed?=?speed>0??Math.ceil(speed):Math.floor(speed); ????????????if(json[sty]?!=ico){ ????????????????flas?=false; ????????????} ????????????if(sty=='opacity'){ ????????????????obj.style.filter='alpha(opacity:'+(ico+speed)+")"; ????????????????console.log((ico+speed)/100); ????????????????obj.style.opacity=(ico+speed)/100; ????????????}else{ ????????????????obj.style[sty]=ico+speed+"px"; ????????????} ????????????if(flas){ ????????????????clearInterval(obj.timer); ????????????????if(fu){ ????????????????????fu(); ????????????????} ????????????} ????????} ????},30); } function?setTmo(obj,attr){ ????if(obj.currentStyle){ ????????return?obj.currentStyle[attr]; ????}else{ ????????return?getComputedStyle(obj,false)[attr]; ????} }錯誤太多了，首先你的opacity的取值是（0到100）才對，
然后ico = Math.round(parseFloat(setTmo(obj,sty))*100);你寫成了Math.random，
if(sty=='opacity'){寫成了if(json[sty]=='opacity'){
obj.style.filter='alpha(opacity:'+(ico+speed)+")";寫成了obj.style.filter='alpha(opacity'+(ico+speed)+"px";