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

最新推荐文章于 2023-12-29 11:07:38 发布

刘斩仙的笔记本

最新推荐文章于 2023-12-29 11:07:38 发布

阅读量4k

点赞数

分类专栏： javascript css

本文链接：https://blog.csdn.net/qq_25252769/article/details/75910478

版权

javascript 同时被 2 个专栏收录

21 篇文章 5 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

代码如下：

<!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

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何用js给css3中的属性和jquery中的animate动态传值

代码如下：<!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; trans
复制链接

扫一扫