zoukankan      html  css  js  c++  java
  • js jq 实现鼠标经过div背景以进度条方式 变宽,鼠标离开变小,同时文字颜色和原来不一样

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 
     5     <title></title>
     6     <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
     7 </head>
     8 <style>
     9     .gg{
    10         height: 50px;
    11         width: 160px;
    12         border: 1px solid #999;
    13         color: #000000;
    14         position: relative;
    15         text-align: center;
    16     }
    17     .jj{
    18         height: 50px;
    19         width: 0;
    20         background-color: #999;
    21         position: absolute;
    22         text-align: center;
    23         overflow: hidden;
    24     }
    25     .text{
    26         height: 50px;
    27         width: 160px;
    28         color: #ffffff;
    29         text-align: center;
    30         overflow: hidden;
    31     }
    32 </style>
    33 <script>
    34 $(document).ready(function(){
    35     var bb;//定义一下bb,就是鼠标离开的定时触发缩小的事件变量,防止鼠标经过时清除事件出错
    36 $(".gg").mouseover(function(){
    37     //alert(5)i
    38     clearInterval(bb);//清除bb,防止黑色背景条还在变小,造成一闪闪的现象
    39     i=$(".jj").width();//获取背景条宽度,从这个宽度开始变大
    40         aa=setInterval(function(){
    41             i+=2;//自增
    42             $(".jj").css("width",i);//赋值给宽度
    43             if (i>=160) {//达到最大宽度,停止变大
    44                 clearInterval(aa);//清除setInterval
    45             }
    46         },3);//毫秒变一次,每次增大量就是上面的自增i
    47     });
    48 $(".gg").mouseout(function(){
    49      //var i=1;
    50      //j
    51      j=$(".jj").width();//获取背景条宽度,从这个宽度开始变小
    52      clearInterval(aa);
    53         bb=setInterval(function(){
    54             j-=2;
    55             $(".jj").css("width",j);
    56             if (j<=0) {
    57 
    58                 clearInterval(bb);
    59             }
    60         },3);
    61 })
    62 })
    63     </script>
    64 <body>
    65 <div class="gg">
    66     <div class="jj"><div class="text">nimeide</div></div>
    67 nimeide 
    68 </div>
    69 </body>
    70 </html>
  • 相关阅读:
    asp.net大文件(视频)上传技术
    asp.net大文件(视频)上传实例解析
    asp.net大文件(视频)上传示例
    asp.net大文件(视频)上传实例
    ubuntu电脑查看显卡型号
    ERROR: After October 2020 you may experience errors when installing or updating packages
    tensorflow各个版本需要的CUDA版本以及Cudnn的对应关系
    pycharm设置多GPU运行
    conda常用命令
    ubuntu更改.condarc文件
  • 原文地址:https://www.cnblogs.com/weiyiyong/p/7257987.html
Copyright © 2011-2022 走看看