<!DOCTYPE?html>
<html>
<head>
??<meta?charset="UTF-8">
??<title>Document</title>
??<style>
????body,div{
??????margin:?0px;
??????padding:?0px;
????}
????div{
??????width:200px;
??????height:?200px;
??????background:?red;
??????margin:10px;
??????float:?left;
??????opacity:?0.3;
????}
??</style>
??<script?type="text/javascript">
????window.onload=function(){
??????var?oDiv=?document.getElementsByTagName('div');
??????for?(var?i=0;i<oDiv.length;i++){
????????oDiv[i].alpha=30;//若多個物體要進行自己的運動,不造成其他物體的影響,需對每個物體定義一個alpha.也可設置oDiv[i].timer?=?null;
????????oDiv[i].onmouseover=function(){
??????????startMove(this,100);//this為當前的物體
????????}
????????oDiv[i].onmouseout=function(){
??????????startMove(this,30);
????????}
??????}
????}
????//obj被套用為this,從而可以在每個alpha或timer上,進行套用.
????function?startMove(obj,iTarget){
??????clearInterval(obj.timer);//先要將原本的動畫效果取消.
??????obj.timer?=?setInterval(function(){
????????var?speed?=?0;
????????if(obj.alpha>iTarget){
??????????speed?=?-10;
????????}
????????else{
??????????speed?=?10;
????????}
????????if(obj.alpha?==?iTarget){
??????????clearInterval(obj.timer);
????????}
????????else{
??????????obj.alpha+=speed;?
??????????obj.style.opacity?=?obj.alpha/100;
????????}
??????},30)
????}
??</script>
</head>
<body>
??<div></div>
??<div></div>
??<div></div>
??<div></div>
</body>
</html>obj.alpha不是==iTarget時就清除動畫了嗎？
obj.alpha 是怎么樣才能大于iTarget啊
Yeah___
2018-03-22 21:03:30
