zoukankan      html  css  js  c++  java
  • jq实现果冻抖动效果

    jq代码实现的果冻抖动效果:http://www.huiyi8.com/js/
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <style type="text/css">
    .test{
        margin:10px 0px;
        
        height:150px;
        border:1px #ccc solid;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 10px;
        opacity:0.8;
         
    }
    </style>
    </head>
    <body style="">
    <div style="margin:50px auto;900px;overflow:visible;">
        <div id="test_01" class="test"></div>
        <div id="test_02" class="test"></div>
        <div id="test_03" class="test"></div>
        <div id="test_04" class="test"></div>
        <div id="test_05" class="test"></div>
        <div id="test_06" class="test"></div>
    </div>
    <script type="text/javascript">
    $('.test').hover(function(){
            $(this).animate({
                 920,
                height: 170,
                marginLeft: -20,
                opacity:0.8
            }, 100 ).animate({
                 910,
                height: 160,
                marginLeft: -10,
                opacity:0.9
            }, 100 ).animate({
                 920,
                height: 170,
                marginLeft: -20,
                opacity:1
            }, 100 )
        },function(){
            $(this).stop(true).animate({
                 900,
                height: 150,
                marginLeft: 0,
                opacity:0.8
            }, 100 );
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    吴裕雄--天生自然 PHP开发学习:数组
    吴裕雄--天生自然 JAVASCRIPT开发学习:测试 jQuery
    【t065】最敏捷的机器人
    【t079】火星上的加法运算
    【t053】整数去位
    【9604】纪念品分组
    【心情】bjdldrz
    【9601】零件分组
    【9916】编辑距离
    【38.24%】【POJ 1201】Intervals
  • 原文地址:https://www.cnblogs.com/lhrs/p/4135939.html
Copyright © 2011-2022 走看看