分享一个用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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
背景图跟随鼠标移动的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中date()日期函数有关参数整理
2011/07/19 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python记录程序运行时间的三种方法
2017/07/14 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Tensorflow累加的实现案例
2020/02/05 Python
python的数学算法函数及公式用法
2020/11/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
后勤园长自我鉴定
2013/10/17 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
表扬信格式模板
2015/05/05 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
房屋质量投诉书
2015/07/02 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL