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


Posted in Javascript onDecember 12, 2011

先?大家看看效果:

分享一个用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>
Javascript 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JS制作简单的三级联动
Mar 18 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
javascript的BOM
May 03 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
js异步接口并发数量控制的方法示例
Nov 22 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 #Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 #Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 #Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 #Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 #Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
JavaScript中的事件处理
2008/01/16 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
document.getElementById介绍
2011/09/13 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
清除输入框内的空格
2016/12/21 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python中Threading用法详解
2017/12/27 Python
python3中zip()函数使用详解
2018/06/29 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
快速查找Python安装路径方法
2020/02/06 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
中学生学习保证书
2015/02/26 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android