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

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

原文地址:http://www.cnblogs.com/weiyiyong/p/7257987.html


最新回复(0)
/jishuRX30_2FGgoBk_2Bruld_2F1_2BFnczD7eqTD2Q1GK26AfG6Ps4A_3D4719378
8 简首页