<!DOCTYPE html">

<html>

<head>

<title>滚动条拖动评分的JS效果</title>

<style>

body{

margin:50px; ;

}

.scale_panel{

font-size:12px;

color:#999;

width:200px;

position:absolute;

line-height:18px;

left:60px;

top:-0px;

}

.scale_panel .r{

float:right;

}

.scale span{

background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/201107/20110730193401905.gif) no-repeat;

width:8px;

height:16px;

position:absolute;

left:-2px;

top:-1px;

cursor:pointer;

}

.scale{

background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/201107/20110730193402219.gif) repeat-x 0 100%;

border-left:1px #83BBD9 solid;

border-right:1px red solid;

width:200px;

height:10px;

position:relative;

font-size:0px;

}

.scale div{

background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/201107/20110730193402948.gif) repeat-x;

width:0px;

position:absolute;

width:0;

left:0;

height:5px;

bottom:0;

}

li{

font-size:12px;

line-height:50px;

position:relative;

height:50px;

list-style:none;

}

</style>

</head>

<body>

<ul>

<li>爱情 <span id="title">0</span>

<div class="scale_panel">

<span class="r">100</span>0

<div class="scale" id="bar">

<div></div>

<span id="btn"></span>

</div>

</div>

</li>

<li>事业 <span id="title2">0</span>

<div class="scale_panel">

<span class="r">100</span>0

<div class="scale" id="bar2">

<div></div>

<span id="btn2"></span>

</div>

</div>

</li>

<li>家庭 <span id="title3">0</span>

<div class="scale_panel">

<span class="r">100</span>0

<div class="scale" id="bar3">

<div></div>

<span id="btn3"></span>

</div>

</div>

</li>

</ul>

</body>

<script>

scale=function (btn,bar,title){

this.btn=document.getElementById(btn);

this.bar=document.getElementById(bar);

this.title=document.getElementById(title);

this.step=this.bar.getElementsByTagName("DIV")[0];

this.init();

};

scale.prototype={

init:function (){

var f=this,g=document,b=window,m=Math;

f.btn.onmousedown=function (e){

var x=(e||b.event).clientX;

var l=this.offsetLeft;

var max=f.bar.offsetWidth-this.offsetWidth;

g.onmousemove=function (e){

var thisX=(e||b.event).clientX;

var to=m.min(max,m.max(-2,l+(thisX-x)));

f.btn.style.left=to+'px';

f.ondrag(m.round(m.max(0,to/max)*100),to);

b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();

};

g.onmouseup=new Function('this.onmousemove=null');

};

},

ondrag:function (pos,x){

this.step.style.width=Math.max(0,x)+'px';

this.title.innerHTML=pos+'%';

}

}

new scale('btn','bar','title');

new scale('btn2','bar2','title2');

new scale('btn3','bar3','title3');

</script>

</html>

web拖动条显示的更多相关文章

  1. WEB进度条控件

    近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色 ...

  2. Android自定义Seekbar拖动条式样

    SeekBar拖动条可以由用户控制,进行拖动操作.比如,应用程序中用户需要对音量进行控制,就可以使用拖动条来实现. 1.SeekBar控件的使用 1.1SeekBar常用属性 SeekBar的常用属性 ...

  3. 拖动条（SeekBar）的功能和用法

    拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程序,而拖动条则通过滑块的位置来标识数值——而且拖动条允许用户拖动滑块来改变值,因而拖动条通常用于对系统的某种数值进行调节,比如调节音量等 ...

  4. 创建Dynamic Web Project时 显示最新Apache Tomcat 8.0 的方法

    创建Dynamic Web Project时  显示最新Apache Tomcat  8.0 等的方法 解决办法如下: 第一步:eclipse菜单help->eclipse marketplac ...

  5. Android零基础入门第53节：拖动条SeekBar和星级评分条RatingBar

    原文:Android零基础入门第53节:拖动条SeekBar和星级评分条RatingBar 前面两期都在学习ProgressBar的使用,关于自定义ProgressBar的内容后期会继续学习的,本期先 ...

  6. Android 拖动条/滑动条控件、星级评分控件

    ProgressBar有2个子控件: SeekBar   拖动条控件 RatingBar   星级评分控件 1.拖动条控件 <SeekBar android:layout_width=" ...

  7. Android 进度条（ProgressBar）和拖动条（Seekbar）补充“自定义组件”（总结）

    这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ...

  8. 【Winform】使用BackgroundWorker控制进度条显示进度

    许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...

  9. flash拖动条移出flash无法拖动

    原因:flash拖动条的拖动事件被嵌入flash的div的鼠标事件给截获了!

随机推荐

  1. 为Play初学者准备的Scala基础知识

    1 前言 本文的主要目的是为了让Play Framework的初学者快速了解Scala语言,算是一篇Play Framework的入门前传吧.使用PlayFramework可以极大的提高开发效率,但是 ...

  2. 解决Windos7中优盘安装centos7后无法引导原系统问题

    一前言 最近学习Linux操作系统,打算在原Window7系统中装centOS7系统,使笔记本上跑双系统.将系统D盘的文件转移后,删除卷标,将U盘做成CentOS7启动盘,进行正常安装.此为前提. 但 ...

  3. 微信小程序对医疗创业的启示，“餐饮+微信小程序”的猜想

    一:微信小程序对医疗创业的启示:如何用完即走 仔细看了张小龙在28日微信公开课上发布小程序时的演讲全文,我觉得对解决当下医疗创业的困惑有着巨大的启发.没准还能开辟新的未来. 张小龙对小程序精髓的阐释是 ...

  4. JVM垃圾收集算法

    JVM垃圾收集 1. 判断对象是否存活 引用计数算法 对象添加一个引用计数器,每个地方引用它,计数器值加+1:当引用失效,计算器值减1:任何时刻计数器为0的对象不可能被使用.引用计数算法实现简单,高效 ...

  5. VueJs生产环境部署

    VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点. 先来看VueJs最终 ...

  6. .net开源权限管理系统

    有业务请加QQ 245747009 源码地址:http://git.oschina.net/sunzewei/EIP 一.更新记录1.更新日期:2017-02-24 00:00:002.更新内容: 版 ...

  7. scroll抖动问题

    参考软文: http://www.cnblogs.com/coco1s/p/5499469.html function throttle(func, wait, mustRun) { var time ...

  8. Autotest添加测试用例小结

    Autotest本身是一个自动化测试框架,可以在上面添加各种测试工具用于系统测试.前几天我在上面添加了几个基于龙芯桌面5.0系统的性能测试工具.现在做以下总结,大体写以下添加的过程. 以unixben ...

  9. Java之枚举

    1.定义 enum 是一种数据类型,与 全局常量比较相似,都是全局的并且是可以通过类名调用的 与全局常量区别 枚举功能更强大,可以有属性和方法 枚举比全局常量更加的规范 2.枚举特性 1)可以有属性以 ...

  10. 06.04 html

    域名跟ip地址是绑定的看某个网站的ip地址 可以ping网址知道ip地址   最终访问的都是ip地址  每个ip地址都对应了一个空间(一块区域 要用来存储内容)网页访问的原理: 客户端电脑发动请求到服 ...