js jq 實現鼠標經過div背景以進度條方式 變寬，鼠標離開變小，同時文字顏色和原來不一樣
阿新 • • 發佈：2017-07-30
最大 java hidden pan absolute 顏色 tin http center
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背景以進度條方式 變寬，鼠標離開變小，同時文字顏色和原來不一樣