如何用js给css3中的属性和jquery中的animate动态传值

来源：互联网发布：java希尔排序算法编辑：程序博客网时间：2024/05/25 18:09
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <script src="jquery-1.11.3.js" type="text/javascript"></script><style> .line{      width:400px;    height:10px;    transform:rotate(0deg);    -ms-transform:rotate(0deg); /* IE 9 */    -webkit-transform:rotate(0deg); /*Safari and Chrome */    position:absolute;    top:203px;}.fu{    width:400px;    height:400px;    background-color:#f99;    border-radius:50%;}.zi{    width:200px;    height:10px;    background-color:yellow;    overflow: hidden;}</style><script>    $(function(){        //animate动态传参  解决css3非数字参数，例如rotate(45deg)，无法使用css()方法        var time=1110;        $('.line').animate(            { textIndent: time },            {step: function(now,fx) {                                    $(this).css({                                        '-webkit-transform':'rotate('+now+'deg)',                                        'transform':'rotate('+now+'deg)',                                        '-ms-transform':'rotate('+now+'deg)'                                        });                                    },                                    duration:2000,     //time                                    easing: "linear"  //运动轨迹                                     //easing: "swing"            });        //动态传参 单一属性        var t=40;        $(".line").css({            'transform':'rotate('+t+'deg)'        });        //动态传参 复合属性        function foo(a,b,c,d){            $(".fu").css({                'transform':'translate'+a+'px,'+b+'px)'+'rotate('+c+'deg)'+'scale('+d+')'            });        }        foo(150,200,40,1.5);    })</script></head><body>    <div class='fu'>        <div class='line'>            <div class="zi"></div>        </div>    </div></body></html>
阅读全文
0 0