                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫(huà)效果

好奇怪啊，是我的瀏覽器兼容問(wèn)題嗎？IE9以上了，用的opacity屬性，JS代碼如下,如果iTarget輸入為1，就只會(huì)到0.7就不動(dòng)了

var timer = null

var alpha = 1
function starttou(iTarget){
? ?var oDiv = document.getElementById('oDiv')
? ?console.log(oDiv.style.opacity)
? ?clearInterval(timer)
? ?var speed = null;
? ?if(iTarget >alpha){
? ? ? ?speed = 0.1
? ?} else if(iTarget < alpha){
? ? ? ?speed = -0.1
? ?}
? ?timer = setInterval(function(){
? ? ? ?if(iTarget ==alpha) {
? ? ? ? ? ?clearInterval(timer)
? ? ? ?}
? ? ? ?else{
? ? ? ? ? alpha = alpha + speed
? ? ? ? ?alpha = Math.floor(alpha*10)/10 ? //不知道為什么，輸出的alpha不是整數(shù)，這里把它取整了
? ? ? ? ? oDiv.style.opacity =alpha

? ? ? ?}

? ?},30)

}

慕粉3428169

2016-08-15

源自：JS動(dòng)畫(huà)效果 2-2

關(guān)注問(wèn)題我要回答

758

操作

收起

3 回答

湛瞳
2016-08-26

解決辦法

???var?oDiv?=?document.getElementById('div1');
???clearInterval(timer);
???var?speed?=?null;
???if(opa?>alpha){
???????speed?=?0.1
???}?else?if(opa?<?alpha){
???????speed?=?-0.1
???}
???timer?=?setInterval(function(){
???????if(opa?==alpha)?{
???????????clearInterval(timer);
???????}
???????else{
??????????alpha?=?alpha?+?speed;
??????????alpha?=?opa?>?alpha???Math.ceil(alpha?*?10)?/?10?:?Math.floor(alpha?*?10)?/?10;
??????????oDiv.style.opacity?=?alpha;
??????}
???},30)

其中Math.ceil()是向上取整。

僅供參考