標籤：javascrip nim color mouse html mouseover center clear 事件
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)i38 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);//清除setInterval45 }46 },3);//毫秒變一次，每次增大量就是上面的自增i47 });48 $(".gg").mouseout(function(){49 //var i=1;50 //j51 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背景以進度條方式 變寬，滑鼠離開變小，同時文字顏色和原來不一樣
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
