灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar:

var Bar = function (opt) {
var defaults = {
$id: "", // 进度条dom节点id
min: 1, // 刻度最小值
stepCount: 5, // 刻度步数
step: 1, // 刻度步长
$alpha: "",//显示亮度的id
touchEnd: function () { } // 拖动完成回调
};
this.option = $.extend(defaults, opt);
this.barNode = $("#" + this.option.$id);
this.parentNode = this.barNode.parents(".J_slider_box");
this.sliderNode = this.barNode.find(".J_slider");
this.fillNode = this.barNode.find(".J_fill");
this.valNode = this.barNode.find(".J_value");
this.val = this.option.min;
// this.valNode.text(this.val); this._init();
return this;
}
Bar.prototype = {
/**
* 根据比例值来重新渲染进度条的位置
* @param ratio 取值:0~1
*/
refreshPos: function (ratio) {
if (ratio >= 1 || ratio < 0) { // 等于1时,js的%取值有问题,故排除
return;
}
// 根据触点位置更新进度条
var percentage = ratio * 100;
this.sliderNode.css("left", percentage + "%");
this.fillNode.css("width", percentage + "%"); var unit = 1 / this.option.stepCount,
halfUnit = unit / 2,
a = Math.floor(ratio / unit),
b = ratio % unit,
index = a + (b < halfUnit ? 0 : 1);
this.val = this.option.min + index * this.option.step;
if (this.option.$alpha) {
$("#" + this.option.$alpha).html(this.val);
} else {
this.valNode.text(this.val);
}
},
/**
* 设置指定的进度值
*/
setVal: function (val) {
var ratio = (val - this.option.min) / (this.option.step * this.option.stepCount);
this.refreshPos(ratio);
},
_init: function () {
var bar = this;
if (!(bar.barNode.width() > 0)) {
setTimeout(function () {
bar._init();
}, 100); // 直到vm渲染完成之后才能取得正确的dom高宽
return;
}
bar.leftDis = bar.barNode.offset().left;
bar.sliderWidth = bar.barNode.width(); bar.barNode.on("touchmove", function (e) {
e.preventDefault();
// bar.parentNode.addClass("on");
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio = (touch.pageX - bar.leftDis) / bar.sliderWidth;
bar.refreshPos(ratio);
}); bar.barNode.on("touchend", function (e) {
e.preventDefault();
//bar.parentNode.removeClass("on");
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio = (touch.pageX - bar.leftDis) / bar.sliderWidth;
bar.refreshPos(ratio);
bar.option.touchEnd(bar.val);
}); bar.refreshPos(this.val); }
};

html:

     <div class="lightsider">
<div id="lightsider" class="slider_box J_slider_box">
<i class="slider_box_icon icon dark"></i>
<div id="lightBar" class="slider_box_bar">
<div class="slider_box_slider J_slider" style="left:0%">
<p class="slider_box_slider_label J_value"></p>
<i class="slider_box_slider_touch"></i>
</div>
<div class="slider_box_line">
<span class="slider_box_line_fill J_fill" style="width:0%"></span>
</div>
</div>
<i class="slider_box_icon icon light"></i>
</div>
</div>

css:

.slider_box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
} .slider_box_icon {
display: block;
width: 35px;
height: 35px;
}
.slider_box_bar {
position: relative;
margin: 0 10px;
padding: 33px 0;
-webkit-box-flex:;
-webkit-flex:;
-ms-flex:;
flex:;
}
.slider_box_slider {
position: absolute;
height: 33px;
top:;
left:;
z-index:;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
} .slider_box_slider_touch {
position: absolute;
left: 50%;
bottom: -11px;
margin-left: -8px;
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
border: 1px solid rgb(195, 194, 194);
}
.slider_box_line {
position: relative;
height: 4px;
border-radius: 4px;
background-color: rgb(195, 194, 194);
}
.slider_box_line_fill {
position: absolute;
top:;
left:;
height: 4px;
background-color: gold;
border-radius: 4px;
}

JavaScript 调用:

   var bar = new Bar({ $id: "lightsider", stepCount: 100, min: 0, $alpha: "alpha" });

stepCount相当于最大长度。$alpha用来显示亮度值。效果如下

主要的原理就是监听 touchmove事件,通过移动的pageX减去圆点左边的位置除以滑动条的总长度得到比率,最后换算成step

   bar.leftDis = bar.barNode.offset().left;
bar.sliderWidth = bar.barNode.width(); bar.barNode.on("touchmove", function (e) {
e.preventDefault();
// bar.parentNode.addClass("on");
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio = (touch.pageX - bar.leftDis) / bar.sliderWidth;
bar.refreshPos(ratio);
});

如果是竖着的滑动条呢? 暂且定义一个UpBar对象:

var UpBar = function (opt) {
var defaults = {
$id: "", // 进度条dom节点id
min: 1, // 刻度最小值
stepCount: 5, // 刻度步数
step: 1, // 刻度步长
$alpha: "",//显示亮度的id
touchEnd: function () { } // 拖动完成回调
};
this.option = $.extend(defaults, opt);
this.barNode = $("#" + this.option.$id);
this.parentNode = this.barNode.parents(".J_slider_box");
this.sliderNode = this.barNode.find(".J_slider");
this.fillNode = this.barNode.find(".J_fill");
this.valNode = this.barNode.find(".J_value");
this.val = this.option.min;
// this.valNode.text(this.val); this._init();
return this;
}
UpBar.prototype = {
/**
* 根据比例值来重新渲染进度条的位置
* @param ratio 取值:0~1
*/
refreshPos: function (ratio) {
if (ratio >= 1 || ratio < 0) { // 等于1时,js的%取值有问题,故排除
return;
}
// 根据触点位置更新进度条
var percentage = ratio * 100;
this.sliderNode.css("bottom", percentage + "%");
this.fillNode.css("height", percentage + "%"); var unit = 1 / this.option.stepCount,
halfUnit = unit / 2,
a = Math.floor(ratio / unit),
b = ratio % unit,
index = a + (b < halfUnit ? 0 : 1);
this.val = this.option.min + index * this.option.step;
if (this.option.$alpha) {
$("#" + this.option.$alpha).html(this.val);
} else {
// this.valNode.text(this.val);
}
},
/**
* 设置指定的进度值
*/
setVal: function (val) {
var ratio = (val - this.option.min) / (this.option.step * this.option.stepCount);
this.refreshPos(ratio);
},
_init: function () {
var bar = this;
if (!(bar.barNode.height() > 0)) {
setTimeout(function () {
bar._init();
}, 100); // 直到vm渲染完成之后才能取得正确的dom高宽
return;
}
bar.topDis = bar.barNode.offset().top;
bar.sliderHeight = bar.barNode.height(); bar.barNode.on("touchmove", function (e) {
e.preventDefault();
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio =1- (touch.pageY - bar.topDis) / bar.sliderHeight;
bar.refreshPos(ratio);
}); bar.barNode.on("touchend", function (e) {
e.preventDefault();
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio =1- (touch.pageY - bar.topDis) / bar.sliderHeight;
bar.refreshPos(ratio);
bar.option.touchEnd(bar.val);
}); bar.refreshPos(this.val); }
};

css:

.slider_box_slider_up {
position: absolute;
width: 33px;
top:;
right: -20px;
z-index:;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.slider_box_slider_touch_up {
position: absolute;
width: 20px;
height: 20px;
bottom: -10px;
left:;
border-radius: 15px;
background-color: white;
border: 1px solid rgb(195, 194, 194);
}
.slider_box_line_up {
width: 4px;
height: 100%;
border-radius: 4px;
position: relative;
margin: 0 auto;
background-color: rgb(195, 194, 194);
}
.slider_box_line_fill_up {
position: absolute;
bottom:;
left:;
width: 4px;
background-color: gold;
border-radius: 4px;
}

html:

 <div class="soundBar">
<div id="soundBar" class="slider_box_up J_slider_box">
<div class="slider_box_line_up">
<span class="slider_box_line_fill_up J_fill" style="height: 0%"></span>
</div>
<div class="slider_box_slider_up J_slider" style="bottom: 0%">
<i class="slider_box_slider_label J_value"></i>
<i class="slider_box_slider_touch_up"></i>
</div>
</div>
</div>

调用:

  var bar = new UpBar({ $id: "soundBar", stepCount: 100, min: 0 });

效果如下:

主要的区别是left-->bottom,width-->height,另外一个因为y轴是以左上角为0,0的,touch.pageY越往下越大,所以算比率的时候用要这样:

 bar.topDis = bar.barNode.offset().top;
bar.sliderHeight = bar.barNode.height();
bar.barNode.on("touchmove", function (e) {
e.preventDefault();
var touch = e.changedTouches ? e.changedTouches[0] : e;
var ratio =1- (touch.pageY - bar.topDis) / bar.sliderHeight;
bar.refreshPos(ratio);
});

有兴趣也可以合二为一。如需要获取值,就订阅touchEnd事件。

【JavaScript吉光片羽】--- 滑动条的更多相关文章

  1. 【JavaScript吉光片羽】遭遇IE8

    最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题.下面扯一下这几天遇到 ...

  2. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  3. 【吉光片羽】ie6兼容性的几个点

    1.浮动换行.自己写个导航,li向左浮动,到ie6下全部错开了. --> 还是在现有bootstrap框架的基础上修改样式保险一些. <div id="mymenu" ...

  4. 【吉光片羽】奇怪的Bug-细节的问题

    这几天用Winform开发了一个小界面,遇到几个奇怪的问题,记录一下. 1.背景图片漏光. 当时很是奇怪,以为是图片的问题,让美工重新发,改成jpg也都存在.很是奇怪,原图这个地方肉眼看是不透明的,而 ...

  5. 【吉光片羽】MVC 导出Word的两种方式

    1.直接将Html转成Word.MVC自带FileResult很好用.Html中我们也可以嵌入自己的样式. html: <div id="target"> <st ...

  6. 【吉光片羽】之 Web API

    1.在asp项目中直接添加apiController,需要新增Global.asax文件.再增加一个webapiConfig,如果需要访问方式为"api/{controller}/{acti ...

  7. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  8. easyui源码翻译1.32--Slider(滑动条)

    前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...

  9. JavaScript初学者应知的24条最佳实践(译)

    原文:24 JavaScript Best Practices for Beginners 译者:youngsterxyf (注:阅读原文的时候没有注意发布日期,觉得不错就翻译了,翻译到JSON.pa ...

随机推荐

  1. Android指纹解锁

    Android6.0及以上系统支持指纹识别解锁功能:项目中用到,特此抽离出来,备忘. 功能是这样的:在用户将app切换到后台运行(超过一定的时长,比方说30秒),再进入程序中的时候就会弹出指纹识别的界 ...

  2. 启动了VSAN服务的主机不在vCenter集群中

    背景: 这个问题的来源是,某用户将该ESXi主机直接夺取到另一个vCenterA的管辖中,而这个vCenterA中集群A开启了VSAN功能,导致再次反向夺取到vCenterB中的时候带有了来自于集群A ...

  3. .NET基础拾遗(5)多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  4. 如何在nuget上传自己的包+搭建自己公司的NuGet服务器(新方法)

    运维相关:http://www.cnblogs.com/dunitian/p/4822808.html#iis 先注册一个nuget账号https://www.nuget.org/ 下载并安装一下Nu ...

  5. ShenNiu.MVC管理系统

    本篇将要和大家分享的是一个简单的后台管理系统,这里先发个地址http://www.lovexins.com:8081/(登陆账号:youke,密码:123123:高级用户账号:gaoji,密码:123 ...

  6. Java定时任务的常用实现

    Java的定时任务有以下几种常用的实现方式: 1)Timer 2)ScheduledThreadPoolExecutor 3)Spring中集成Cron Quartz 接下来依次介绍这几类具体实现的方 ...

  7. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  8. Android程序中--不能改变的事情

    有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...

  9. nginx代理https站点(亲测)

    nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...

  10. raspberrypi(树莓派)上安装mono和jexus,运行asp.net程序

    参考网址: http://www.linuxdot.net/ http://www.cnblogs.com/mayswind/p/3279380.html http://www.raspberrypi ...