【JavaScript吉光片羽】--- 滑动条
灯光的亮度控制需要一个滑动条,先借用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吉光片羽】--- 滑动条的更多相关文章
- 【JavaScript吉光片羽】遭遇IE8
最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题.下面扯一下这几天遇到 ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- 【吉光片羽】ie6兼容性的几个点
1.浮动换行.自己写个导航,li向左浮动,到ie6下全部错开了. --> 还是在现有bootstrap框架的基础上修改样式保险一些. <div id="mymenu" ...
- 【吉光片羽】奇怪的Bug-细节的问题
这几天用Winform开发了一个小界面,遇到几个奇怪的问题,记录一下. 1.背景图片漏光. 当时很是奇怪,以为是图片的问题,让美工重新发,改成jpg也都存在.很是奇怪,原图这个地方肉眼看是不透明的,而 ...
- 【吉光片羽】MVC 导出Word的两种方式
1.直接将Html转成Word.MVC自带FileResult很好用.Html中我们也可以嵌入自己的样式. html: <div id="target"> <st ...
- 【吉光片羽】之 Web API
1.在asp项目中直接添加apiController,需要新增Global.asax文件.再增加一个webapiConfig,如果需要访问方式为"api/{controller}/{acti ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- easyui源码翻译1.32--Slider(滑动条)
前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...
- JavaScript初学者应知的24条最佳实践(译)
原文:24 JavaScript Best Practices for Beginners 译者:youngsterxyf (注:阅读原文的时候没有注意发布日期,觉得不错就翻译了,翻译到JSON.pa ...
随机推荐
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- [ 高并发]Java高并发编程系列第二篇--线程同步
高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- setAttribute()
●节点分为不同的类型:元素节点.属性节点和文本节点等. ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点. ●getElementsByTagNam ...
- java使用websocket,并且获取HttpSession,源码分析
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...
- 来自于微信小程序的一封简讯
9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...
- Java列表
Java列表踩过的坑 其中subList是RandomAccessSubList,不是序列化的列表,不可以加入tair. 加入tair测试代码 @Autowired private CacheMana ...
- Android:Activity+Fragment及它们之间的数据交换.
Android:Activity+Fragment及它们之间的数据交换 关于Fragment与Fragment.Activity通信的四种方式 比较好一点的Activity+Fragment及它们之间 ...
- [Android]使用Dagger 2进行依赖注入 - Producers(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6234811.html 使用Dagger 2进行依赖注入 - P ...
- echo命令
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法echo命令的功能是在显示器上显示一段文字,一般起到一个提示的 ...