分享一个用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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python threading多线程编程实例
2014/09/18 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
python中time、datetime模块的使用
2020/12/14 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
会计毕业自我鉴定
2014/02/05 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
公司门卫岗位职责
2014/03/15 职场文书
党风廉政承诺书
2014/03/27 职场文书
丧事主持词大全
2014/04/02 职场文书
工程索赔意向书
2014/08/30 职场文书
四风对照检查材料范文
2014/09/27 职场文书
先进党员事迹材料
2014/12/24 职场文书
教师研修随笔感言
2015/11/18 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Python 实现Mac 屏幕截图详解
2021/10/05 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
python基础之函数的定义和调用
2021/10/24 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers