为了账号安全,请及时绑定邮箱和手机立即绑定

同一套代码,宽高可以改变,透明度为什么就没法改变了

为什么我的设透明度没法正常运行,而运行宽高时都正常,大神们给我看下透明度这块哪里有误

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>

</title>

<style type="text/css">

       #test{

        height: 200px;

        width: 200px;

        border: 2px solid red;

        background: blue;

        opacity: 0.3;

        filter:alpha(opacity:30);

       }

</style>

<script type="text/javascript">

       window.onload = function(){

        var test = document.getElementById('test');

        test.onmouseover = function(){

        startMove(this,'opacity',300);

        }

        test.onmouseout = function(){

        startMove(this,'opacity',200);

        }

       }

       var timer = null;

       function startMove(obj,attr,target){

         clearInterval(obj.timer);

          var speed=0;

          obj.timer = setInterval(function(){

           var icur = 0 ;

           if(attr=='opacity'){

           icur = Math.round(parseFloat(obj,attr)*100);

           }else{

           icur = parseInt(getStyle(obj,attr));

           }

           

           speed = (target-icur)/8;

           speed = speed>0?Math.ceil(speed):Math.floor(speed);

           if(icur==target){

           clearInterval(obj.timer);

           }else{

           if(attr=='opacity'){

                   obj.style.opacity = (icur+speed)/100;

                   obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';

           }else{

              obj.style[attr] = icur+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="test"></div>

</body>

</html>


正在回答

1 回答

找到原因了,  icur = Math.round(parseFloat(obj,attr)*100);这里没加getStyle,但是谷歌浏览器居然不给报错

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113931    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

同一套代码,宽高可以改变,透明度为什么就没法改变了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信