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 ...
随机推荐
- dns 域名地址
Public DNS+ 是属于 腾讯云旗下的公共 DNS 服务.拥有 80 多条国内线路和 4 条海外线路,有 BGP Anycast 技术,也是国内首家支持谷歌 ECS (edns-client-s ...
- Spring Security数据库管理
要实现数据库管理用户角色及权限,需要自定义用户登录功能,Spring Security已经为我们提供了接口UserDetailService.需要以下表: 用户表 角色表 权限表 用户角色关系表 权限 ...
- vscode 正则 计算代码全部有效行数；清除文件空行
清除空行: 正则表达式:^\s*(?=\r?$)\n 计算全部代码行数: 正则表达式:b*[^:b#/]+.*
- Postman用法，了解一下
一.Postman的基础功能 二.接口请求流程 1. GET 请求 GET请求:点击Params,输入参数及value,可输入多个,即时显示在URL链接上, 所以,GET请求的请求头与请求参数如在接口 ...
- js语法规则 ---console.log ---- prompt ----基本类型 ---parseInt
在页面中可以在body里面加入type=”text/javascript” 例如: <script type="text/javascript"> </scrip ...
- VS使用GUID（UUID的基础知识）
UUID 是 通用唯一识别码(Universally Unique Identifier)的缩写,目的是让分布式系统中的所有元素,都能有唯一的辨识信息,而不需要通过中央控制端来做辨识信息的指定. UU ...
- Java课程作业之动手动脑（六）
1.使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. import java.io.IOException; import java.nio.file ...
- 40. 数据泵导入导出impdp、expdp
一.查看管理理员目录(同时查看操作系统是否存在,因为Oracle并不关心该目录是否存在,如果不存在,则出错)select * from dba_directories; 二.创建逻辑目录,该命令不会在 ...
- 使用MediaPlayer类和SurfaceView来播放视频
MediaPlayer可以播放视频,只需需要SurfaceView的配合,SurfaceView主要用于显示MediaPlayer播放的视频流媒体的画面渲染. SurfaceView是配合MediaP ...
- ubuntu-14.04中/boot分区不足的解决办法
环境:ubuntu-kylin 或者 ubuntu-14.04,/boot单独分区工具:ubuntu的liveCD. 问题: 由于当初安装的时候,看网上说/boot很小,100M足以,于是单独分区,分 ...