js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样
Posted 一个永
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样的主要内容，如果未能解决你的问题，请参考以下文章
如何用js或者css实现，鼠标经过的时候背景色变化，停留在这页时，背景色还是变化后的颜色
鼠标悬浮DIV上时改变DIV的 背景图片和字体颜色，搞清楚 是背景图片不是背景颜色，我写的但是报语法错