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 ...
随机推荐
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- shell 的有用函数
1.isNumber 2.命令可用 3.当前用户是root 1.isNumber 判断“字符串”是否是个数字: declare chkNumber= isNumber(){ parameter1=$ ...
- MySQL死锁问题分析及解决方法实例详解(转)
出处:http://www.jb51.net/article/51508.htm MySQL死锁问题是很多程序员在项目开发中常遇到的问题,现就MySQL死锁及解决方法详解如下: 1.MySQL常用 ...
- 19.纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
原文地址:https://segmentfault.com/a/1190000014836748 感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path ...
- linux的可中断sleep_on函数分析
void interruptible_sleep_on (struct task_struct **p)// **p是个全局变量 { struct task_struct *tmp; if (!p)# ...
- oracle中查询表是否存在
select count(*) from user_tables where table_name='表名' 或者 select 1 from user_tables where table_name ...
- 错误：SyntaxError: Missing parentheses in call to 'print'
1.Python3编译器使用print函数需加括弧 print(XXX) 而Python 2可以print XXX 2.Python3表示不等只能用"!=" 3.在python3中 ...
- mobile-net v2 学习记录。我是菜鸡！
声明:只是自己写博客总结下,不保证正确性,我的理解很可能是错的.. 首先,mobile net V1的主要特点是: 1.深度可分离卷积.用depth-wise convolution来分层过滤特征,再 ...
- Java ssl认证记录
听到有人在用,所以自己随便搜了搜试了下,这里就是简单记录 就是操作了一遍这篇博文 https://blog.csdn.net/a495614205/article/details/12648939 i ...
- JAVA8-待续
1. 函数式编程,因为在并发和时间驱动编程中的优势,函数式编程又逐渐流行起来 以前是实现一个比较器需要实现Comparator接口,并重写compare方法,以下为两种实现方法(类似还有线程,事件等) ...