zoukankan      html  css  js  c++  java
  • jQuery UI添加效果

    1、设计源码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>添加效果</title>
    <link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/themes/base/jquery.ui.all.css">
    <script src="../js/jquery-ui-1.10.4/development-bundle/jquery-1.10.2.js"></script>
    <script src="../../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.effect.js"></script>
    <link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/demos/demos.css">
    <style>
       .effect{
           500px;
          height: 300px;
          position: relative;
       }
       .effect-content{
           200px;
          height: 100px;
          font-size: 40px;
          border: 1px solid #FF0000;
          color: #00FF00;
          padding: 10px;
       }
       .divClass{
          text-indent: 10px;
          letter-spacing: 20px;
           300px;
          height: 200px;
          padding: 10px;
          font-size: 50px;
          font-weight: bolder;
       }
       #btn{
           200px;
          height: 100px;
          font-size: 30px;
          cursor: pointer;
       }
    </style>
    <script>
       $(function(){
    	   $("#btn").click(function(){
    		   $(".effect-content").addClass("divClass",2000,callFunc);
    		   
    		   return false;
    	   });
    	   
    	   var callFunc = function(){
    		   setTimeout(function(){
    			   $(".effect").removeClass("divClass");
    		   },2000);
    	   }
       });
    </script>
    </head>
    <body>
       <div class="effect">
            <div class="effect-content ui-corner-all" >
                 	上下左右
            </div>
       </div>
       <button id="btn" class="ui-state-default ui-corner-all">效果</button>
    </body>
    </html>

    2、实现结果

    (1)初始化


    (2)点击按钮后


  • 相关阅读:
    生成器
    IO调度算法
    进程与线程
    磁盘阵列(RAID)实例
    KVM虚拟化技术(七)虚拟机配置文件
    查询快递单号-京东快递接口
    快递单号查询快递鸟API接口-优速快递
    查询快递单号-德邦快递
    快递单号查询快递鸟API接口-EMS
    快递单号查询快递鸟API接口--安能快递
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314216.html
Copyright © 2011-2022 走看看