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 ...
随机推荐
- [java,2018-01-16] HttpClient发送、接收 json 请求
最近需要用到许多在后台发送http请求的功能,可能需要发送json和xml类型的数据. 就抽取出来写了一个帮助类: 首先判断发送的数据类型是json还是xml: import org.dom4j.Do ...
- Matplotlib模块
不求甚解,不断学习不断添加... 2017.10.26 1.绘制简单的图像 # 第一步创建显示画面,figure('show')指定图表名称 plt.figure('data') #绘制图像--> ...
- python生成器异步使用
import dis,time # 反汇编 import threading def request(): print('start request') v = yield print(v) def ...
- 关于dumper和mysqldump的
最近在做版本更新 使用dumper在连接阿里云的RDS的时候 老是提示 需要超级管理员权限 无能只能使用系统自带的mysqldump了 语句简单方便 而且导出的表 没有加载库信息 mysqldump ...
- 6.简单提取小红书app数据(简单初步试采集与分析)-1
采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...
- docker pull centos慢问题的解决方案
1.现象 如果直接docker pull centos 两个小时才down下来8M,很慢 2.解决 [root@localhost network-scripts]# cd /etc/docker [ ...
- 【ASP.NET 进阶】PDF文件在线预览（类似百度文库）
工作需要完成文档的在线预览,现在完成了第一步PDF文件的预览,步骤是通过PDF转换工具pdf2swf.exe把PDF文件转换为SWF文件,然后通过FlexPaper就可以预览了.效果如下(GIF图片太 ...
- springboot 端口号
1. 读取端口号 2.多端口运行 2.
- 为什么我希望用C而不是C++来实现ZeroMQ
原文在这里 开始前我要先做个澄清:这篇文章同Linus Torvalds这种死忠C程序员吐槽C++的观点是不同的.在我的整个职业生涯里我都在使用C++,而且现在C++依然是我做大多数项目时的首选编程语 ...
- WPF 自定义鼠标光标
在程序中使用自定义鼠标光标的三种方式: RadioButton senderButton = sender as RadioButton; 方式一: str ...