zoukankan      html  css  js  c++  java
  • 昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js"></script>
        </head>
        
    <style>
    body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}
        .box{
            width: 300px;
            height: 300px;
            background: green;
            border: 1px solid #e6e6e6;
            margintop: 50px;
            line-height: 200px;
            position: absolute;
        }
    button{
        border: none;
        background: green;    
        width: 100px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 16px;
        margin-top: 50px;
        }
    </style>
        
        <body>
            <button>点击开始动画</button>
            
            <div class="box" ></div>
            
            <script> 
                $(document).ready(function(){
                  $("button").click(function(){
                    var div=$(".box");
                    div.animate({height:'200px',opacity:'0.4'},"slow");
                    div.animate({'200px',opacity:'0.8'},"slow");
                    div.animate({height:'100px',opacity:'0.4'},"slow");
                    div.animate({'100px',opacity:'0.8'},"slow");
                    div.animate({right:'100px',opacity:'0.8'},"slow");
                    div.animate({bottom:'100px',opacity:'0.8'},"slow");
                    div.animate({left:'100px',opacity:'0.8'},"slow");
                    div.animate({top:'100px',opacity:'0.8'},"slow");
                  });
                });
            </script> 
    
            <script>
                $(document).ready(function(){
                    $("button").click(function(){
                        var div=$(".box");
                            div.animate({height:'300px',opacity:'0.4'},"slow");
                            div.animate({'300px',opacity:'0.8'},"slow");
                            div.animate({height:'100px',opacity:'0.4'},"slow");
                            div.animate({'100px',opacity:'0.8'},"slow");
                        });
                    });
                });
            </script>
            
        </body>
    </html>

    .animate  事件,是这个 里面的新的东西。解释起来就是  使div 块儿  变得有灵魂 可以移动。

     Tips:

    1、click 事件的  点击节点的选择

    2、通过 var div=$(".box")  来选择需要控制的 css 属性

    剩下的就要靠 自己去敲代码,看效果 去理解其中的 意思。

    欢迎推荐,欢迎 star
  • 相关阅读:
    洛谷 2574 XOR的艺术
    洛谷 1774 最接近神的人
    洛谷 3398 仓鼠找sugar 【模板】判断树上两链有交
    洛谷 2440 木材加工
    洛谷 1824 进击的奶牛
    洛谷 1873 砍树
    洛谷 1577 切绳子
    51nod1485 字母排序
    51nod1055 最长等差数列
    51nod1128 正整数分组V2
  • 原文地址:https://www.cnblogs.com/erbingbing/p/4231213.html
Copyright © 2011-2022 走看看