zoukankan      html  css  js  c++  java
  • 有意思的效果——左右摇摆

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style>
     7             .box{width: 1000px;height: 400px;background: deepskyblue;}
     8             .a{width: 50px;height: 400px;background: #FFFFFF;float:left;border: 1px solid black;position: relative;}
     9             .b{width: 0;height: 400px;background: deepskyblue;float: left;}
    10         </style>
    11         <script src="js/jquery-1.11.3.js"></script>
    12         <script>
    13             $(function(){
    14                 flag=[0,0,0,0,0]//原来控制器还能这么玩
    15                 //alert(flag[3])
    16                 
    17                 $(".a").mouseenter(function(){
    18                     //alert($(this).index()
    19                 move($(this).index())
    20                     
    21                 })
    22                 
    23                 function move(n){
    24                 if(flag[n]==0){
    25                     
    26                             $(".a").eq(n).animate({left:700},1000,function(){
    27                                 $(".a").eq(n).css({background:"red"})
    28                                 $(".a").eq(n).text("aaaa")
    29                             })
    30                         flag[n]=1
    31                             
    32                         
    33                     }else if(flag[n]==1){
    34                         var a=700;
    35                 
    36                             $(".a").eq(n).animate({left:0},500,function(){
    37                                 $(".a").eq(n).css({background:"white"})
    38                                 
    39                             })
    40                             flag[n]=0
    41                     }
    42                 }
    43                 
    44             })
    45             
    46         </script>
    47     </head>
    48     <body>
    49         <div class="box">
    50         
    51             <div class="a" >呀呀呀</div>
    52         
    53             <div class="a" >哈哈哈</div>
    54             
    55             <div class="a" >吼吼吼</div>
    56         
    57             <div class="a" >呜呜呜</div>
    58         
    59             <div class="a" >呃呃呃</div>
    60             
    61         </div>
    62     </body>
    63 </html>
  • 相关阅读:
    Spring Boot笔记一 输出hello
    Java Web之表单重复提交问题
    Java Web之验证码
    Java Web之下载文件
    Java工具之上传文件
    Java Web之上传文件
    Java Web之EL
    Java Bean的规范
    Java Web之JSP
    《FPGA全程进阶---实战演练》第一章之如何学习FPGA
  • 原文地址:https://www.cnblogs.com/thestudy/p/6285361.html
Copyright © 2011-2022 走看看