js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样
<!DOCTYPE html>
<html>
<head> <title></title>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style>
.gg{
height: 50px;
width: 160px;
border: 1px solid #999;
color: #000000;
position: relative;
text-align: center;
}
.jj{
height: 50px;
width: 0;
background-color: #999;
position: absolute;
text-align: center;
overflow: hidden;
}
.text{
height: 50px;
width: 160px;
color: #ffffff;
text-align: center;
overflow: hidden;
}
</style>
<script>
$(document).ready(function(){
var bb;//定义一下bb，就是鼠标离开的定时触发缩小的事件变量，防止鼠标经过时清除事件出错
$(".gg").mouseover(function(){
//alert(5)i
clearInterval(bb);//清除bb，防止黑色背景条还在变小，造成一闪闪的现象
i=$(".jj").width();//获取背景条宽度，从这个宽度开始变大
aa=setInterval(function(){
i+=2;//自增
$(".jj").css("width",i);//赋值给宽度
if (i>=160) {//达到最大宽度，停止变大
clearInterval(aa);//清除setInterval
}
},3);//毫秒变一次，每次增大量就是上面的自增i
});
$(".gg").mouseout(function(){
//var i=1;
//j
j=$(".jj").width();//获取背景条宽度，从这个宽度开始变小
clearInterval(aa);
bb=setInterval(function(){
j-=2;
$(".jj").css("width",j);
if (j<=0) { clearInterval(bb);
}
},3);
})
})
</script>
<body>
<div class="gg">
<div class="jj"><div class="text">nimeide</div></div>
nimeide
</div>
</body>
</html>
js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样的更多相关文章
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
- 基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- div实现圆环进度条
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- 使用div实现progress进度条
在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*) 可以在CSS里改样式,可以JS里改进度. <div cla ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
随机推荐
- async 常用函数总结
待更新. waterfall auto(神器) parallel mapSeries(数据库多条记录操作神器)
- asp.net 中日期的格式化显示的方法
在Asp.net 中经常使用日期,在不同的场合,对日期的显示方式有不同的要求,为此,自己总结了一些日期格式化的方式,仅供学习参考使用: C#格式化日期时间 DateTime dt = DateTime ...
- js_字符转Unicode
在开发中总会遇到关于Unicode的转码和解码,每次都找工具转/解码很麻烦 ,今天在网上get到一个简单的转/解Unicode的函数. var UnicodeFun = { toUnicode: fu ...
- nginx, supervisor, celery
资料: supervisor和nginx使用 1 .supervisor 管理进程工具 2 .nginx 反向代理, 负载均衡 安装nginx $ sudo apt-get update $ su ...
- oracle 服务名 数据库名 实例名
服务名 show parameter service_name 实例名 show parameter instance 数据库名 show parameter db conn username/pas ...
- 公式for TinyMCE 编辑器@ cnblogs.com
编辑器截图: 行内公式:\( f(x,y,z) = 3y^2 z \left( 3 + \frac{7x+5}{1 + y^2} \right) \) 行间公式:\\( f(x,y,z) = 3 ...
- ios判断当前设备类型
代码如下: + (NSString*) deviceString { // 需要#import "sys/utsname.h" struct utsname systemInfo; ...
- 关于dumper和mysqldump的
最近在做版本更新 使用dumper在连接阿里云的RDS的时候 老是提示 需要超级管理员权限 无能只能使用系统自带的mysqldump了 语句简单方便 而且导出的表 没有加载库信息 mysqldump ...
- py库： jieba （中文词频统计） 、collections （字频统计）、WordCloud （词云）
先来个最简单的: # 查找列表中出现次数最多的值 ls = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2, 1, 1] ls = ["呵呵", "呵呵&qu ...
- 《算法》第五章部分程序 part 2
▶ 书中第五章部分程序,包括在加上自己补充的代码,字符串高位优先排序(计数 + 插排),(原地排序),(三路快排,与前面的三路归并排序相同) ● 计数 + 插排 package package01; ...