分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

先給大家看看效果:

效果介紹:
　　鼠标滑过进度条改变进度值.
兼容性:
　　可完美兼容IE6,IE7,IE8,Chrome,Firefox
代码:


代码如下:

<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<style type="text/css">
#prg{
font-size:12px;
height:100%;
margin-bottom:3px;
overflow:hidden;
color:#2C2C2C;
font-family:Arial,Tahoma,"Bitstream Vera Sans",sans-serif;
}
#prg .txt{
min-width:50px;width:auto;float:left;
}
#prg .num{
color: #656565;
font-style:normal;
margin:0 6px;
}
#prg .load{
background-color:#F6F5F5;
border:1px solid #BBBBBB;
height:10px;
float:left;
margin-top:1px;
position:relative;
}
#prg #p{
background-color:#F9AE3D;
border:1px solid #E87F16;
font-size:1px;
min-height:8px;
max-height:10px;
height:10px;
left:-1px;
position:absolute;
top:-1px;
}
</style>
</head>
<body id='a'>
<div id="prg">
<span class="txt">普通</span>
<div style="width:100px;" class="load" onmousemove="xPrg(this,event)"><span style="width:50%;" id="p"></span></div>
<span class='num'>4324323</span>
</div>
<script type='text/javascript'>
function xPrg(i,e){
var i=$(i);
var p=i.getElementById('p');
if(!i || !p){return false;}
i.setStyle('cursor','pointer');
i.onclick=function(){
alert('点我干啥?');
}
　　var ex=e.clientX; //鼠标现在的位置
　　var s=p.getPosition().x.toInt(); //原始x偏移量
　　var bw=i.getStyle('width').toInt(); //进度条盒子宽度(px)
　　var nw=ex-s;nw=(nw>bw)?bw:nw;nw=(nw<1)?0:nw; //鼠标所在位置的宽度
　　p.setStyle('width',nw+'px');
　　var x=bw/5;
if(nw>0 && nw<=x){
$('prg').getElement('.txt').set('text','非常差');
}else if(nw>x && nw<=(x*2)){
$('prg').getElement('.txt').set('text','很差');
}else if(nw>x && nw<=(x*3)){
$('prg').getElement('.txt').set('text','普通');
}else if(nw>x && nw<=(x*4)){
$('prg').getElement('.txt').set('text','很好');
}else if(nw>x && nw<=(x*5)){
$('prg').getElement('.txt').set('text','非常好');
}
}
</script>

赞 (0)

相关推荐

  • 分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

    分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

    先給大家看看效果: 效果介紹: 鼠标滑过进度条改变进度值.兼容性: 可完美兼容IE6,IE7,IE8,Chrome,Firefox代码: 复制代码 代码如下: <script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> <style type=

  • 分享一个我自己写的ToolTip提示插件(附源码)

    分享一个我自己写的ToolTip提示插件(附源码)

    继续分享一个我自己写的 ToolTip提示插件,希望大家支持我,给我点评论,哪怕骂我的也好啊,让我知道有人在关注我"小豆" 嘿嘿.废话不多说上代码! 复制代码 代码如下: $.fn.ToolTip = function (option) { var defaults = { direction: "down", star: function () { }, from: $(this), url: '../images/arrow.png' }; //方法内基础变量

  • 分享一个自己动手写的jQuery分页插件

    工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后

  • JQuery实现鼠标滑过显示导航下拉列表

    当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

  • jQuery鼠标滑过横向时间轴样式(代码详解)

    每日分享效果,今天分享内容为:jQuery鼠标滑过横向时间轴样式 效果图: HTML代码: `<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div

  • SpringBoot如何实现一个实时更新的进度条的示例代码

    前言 博主近期接到一个任务,大概内容是:导入excel表格批量修改状态,期间如果发生错误则所有数据不成功,为了防止重复提交,做一个类似进度条的东东. 那么下面我会结合实际业务对这个功能进行分析和记录. 正文 思路 前端使用bootstrap,后端使用SpringBoot分布式到注册中心,原先的想法是导入表格后异步调用修改数据状态的方法,然后每次计算修改的进度然后存放在session中,前台jquery写定时任务访问获取session中的进度,更新进度条进度和百分比.但是这存在session在服务

  • 关于Python中进度条的六个实用技巧分享

    关于Python中进度条的六个实用技巧分享

    目录 1 简介 2 tqdm中实用的6个特性 2.1 autonotebook自动切换进度条风格 2.2 延迟渲染进度条 2.3 自定义进度条色彩 2.4 自主控制的进度上限 2.5 针对enumerate.zip和map的替代 2.6 设置进度条“用完即逝” 总结 1 简介 费老师我在几年前写过的一篇文章(https://www.jb51.net/article/243348.htm)中,介绍过tqdm这个在当下Python圈子中已然非常流行的进度条库,可以帮助我们为任何具有循环迭代过程的代码

  • jquery实现的一个简单进度条效果实例

    jquery实现的一个简单进度条效果实例

    jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的. 效果演示: 进度条实现源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&qu

  • jQuery带进度条全屏图片轮播特效代码分享

    jQuery带进度条全屏图片轮播特效代码分享

    本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图:                  -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty

  • Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

    Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

    这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下 幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换. 自定义切换参数效果:向下切换.切换时间为8秒.鼠标滑过按钮时切换   运行效果截图如下: 具体代码如下 <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2

随机推荐