zoukankan      html  css  js  c++  java
  • JS动画

    JS动画

    一、JS结合CSS实现动画

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

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

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

    <style>
        .div {
             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通过定时器实现动画

    • 轮播图
  • 相关阅读:
    [手游新项目历程]-36- error: stray ‘357’ in program
    广告学(一)
    VMware的Unity模式
    poj3709
    poj1849
    bzoj2007
    bzoj3209
    bzoj2466,poj1222
    bzoj1016
    bzoj2186
  • 原文地址:https://www.cnblogs.com/liu--huan/p/9817033.html
Copyright © 2011-2022 走看看