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>
  • 相关阅读:
    关于博客园各项工具的使用
    Java常用的7大排序算法汇总
    Java 基本数据类型(新手必看资料)
    学习Java,还需要学好哪些知识
    JavaSE基础知识总结
    python2.7.11安装pygame包
    phpstorm打开项目目录时,出现一直在扫描文件
    laravel 通过npm搭建前端资源的注意事项
    基于laravel5.2进行rabbitmq队列服务发送接收信息
    在centos7中安装composer
  • 原文地址:https://www.cnblogs.com/lhrs/p/4135939.html
Copyright © 2011-2022 走看看