<!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. 使用Cmder的几个问题

    Cmder 全尺寸版本 [101022] 新版本的 Cmder Full 版本,安装包目录的 config 目录下,已经没有 aliases 文件,在 vendor 下的 init.bat 下也没有了 ...

  2. Nginx http和https 共存

    nginx https 配置,添加证书启动https server { listen default_server; listen ; server_name _; ssl on; ssl_certi ...

  3. Unity使用Mono.Xml代替System.Xml 测试

    测试环境 操作系统:Windows8.1 开发工具:Unity5.5.2 1.新建一个测试项目,观测引用System.Xml与Mono.Xml解析文件正确性,与打包后APK体积大小. 2.Mono.X ...

  4. Bootstrap实现轮播图

    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...

  5. Angular2 关于*ngFor 嵌套循环

    在项目开发中拿到的数据是这样的,要循环遍历出来.可是在ng2中好像不能直接遍历Object datas: any = [ { num: 1, date: "2017-04-12", ...

  6. JBoss7安装、测试、配置和启动以及停止,部署

    转:http://www.hongyanliren.com/2014m01/3013.html 内容概要 JBoss系列三主要目的是演示如何部署应用到JBoss7/WildFly,如下图中描述了部署应 ...

  7. 8.Java 加解密技术系列之 PBE

    Java 加解密技术系列之 PBE 序 概念 原理 代码实现 结束语 序 前 边的几篇文章,已经讲了几个对称加密的算法了,今天这篇文章再介绍最后一种对称加密算法 — — PBE,这种加密算法,对我的认 ...

  8. android学习-第一讲

    一.基础View控件 View类的常见XML属性,对应发放及说明 每个界面控件都需要设置Android:layout_height,Android:layout_width,指定控件的高度和宽度.通常 ...

  9. Zepto源码分析-ajax模块

    源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...

  10. PHP基础入门(二)---入门必备哦!

    前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...