前端之js动画-47

前端之js动画-47

JS动画

一、JS结合CSS实现动画

1、通过事件修改指定的样式，形成过渡的第二状态

<style>
    #div {
        width: 200px;
        height: 200px;
        background: red;
        transition: .2s;
   }
</style>
<div id="div"></div>
<script>
    div.onclick = function() {
        this.style.width = '400px';
   }
</script>

2、通过事件修改指定的类名，形成过渡的第二状态

<style>
    .div {
        width: 200px;
        height: 200px;
        background: red; 
        transition: .2s;
   }
    .div.active {
        transform: scale(1.2);
   }
</style>
<div id="div" class="div"></div>
<script>
    div.onclick = function() {
        var t_name = "active"
        var c_name = this.className;
        if (!c_name.match(t_name)) {
            this.className += " " + t_name;
       } else {
            this.className = c_name.replace(" " + t_name, "");
       }
   }
</script>

二、JS通过定时器实现动画

• 轮播图

posted on 2018-12-27 21:18 漫天飞雪世情难却 阅读( ...) 评论( ...)   编辑 收藏

转载于:https://www.cnblogs.com/jokezl/articles/10187433.html