分享一個用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>
复制代码



　　

posted @   已經停更  阅读(1657)  评论(13)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手