                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

沒用Math.round()方法，為什么沒問題

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>javascript_move</title>
????<style>
????*{margin:?0;padding:?0}
????#box4{background-color:?green;width:?200px;height:?200px;opacity:?0.3;margin:?20px;float:?left;}
????</style>
????<script?type="text/javascript">
????window.onload=function(){
????????var?movepart3=document.getElementsByTagName('div');
????????for(var?i=0;i<movepart3.length;i++){
????????????movepart3[i].timer=null;
????????????movepart3[i].onmouseover=function(){
????????????????startmove3(this,100,'opacity');
????????????}
????????????movepart3[i].onmouseout=function(){
????????????????startmove3(this,30,'opacity');
????????????}
????????}
????}
????function?startmove3(box3,target,attr){
????????clearInterval(box3.timer);
????????box3.timer=setInterval(function(){
????????????var?a=0;
????????????if(attr=='opacity'){
????????????????a=parseFloat(getStyle(box3,attr))*100;//這里沒用Math.round();
????????????}else{
????????????????a=parseInt(getStyle(box3,attr));
????????????}
????????????var?speed=(target-a)/8;
????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????if(a==target){
????????????clearInterval(box3.timer);
????????????}
????????????else{
????????????????if(attr=='opacity'){
????????????????????box3.style.opacity=(a+speed)/100;
????????????????????console.log(box3.style.opacity);//我這里加了斷點，測試opacity當前值
????????????????????box3.style.filter="alpha(opacity="+(a+speed)+")";
????????????????}
????????????????else{
????????????????????box3.style[attr]=a+speed+"px";
????????????????}
????????????}
????????},30);
????}
????function?getStyle(obj,attr){
????????if(obj.currentStyle){
????????????return?obj.currentStyle[attr];
????????}else{
????????????return?getComputedStyle(obj,false)[attr];
????????}
????}
????</script>
</head>
<body>
????<div?id="box4"></div>
????<div?id="box4"></div>
????<div?id="box4"></div>
????<div?id="box4"></div>
</body>
</html>

沒用Math.round()竟然沒問題，奇了怪了，什么情況~？變量名有點奇怪，請答題的大大將就下。代碼復制另存html就可以運行了。

下面是console.log()測試的opacity值：