手势事件
touchstart 手指按下 、touchmove 手指移动 、 touchend 手指抬起
效果图:
完整代码:
ruler.js
var ruler = {
/**
* 初始化刻度尺插件
* @el 容器 String
* @height 刻度尺高度 Number
* @maxScale 最大刻度 Number
* @startValue 开始的值 Number
* @region 区间 Array
* @background 刻度尺背景颜色 String
* @color 刻度线和字体的颜色 String
* @markColor 中心刻度标记颜色 String
* @isConstant 是否不断地获取值 Boolean
* @success(res) 滑动结束后的回调 Function
* */
initPlugin: function (params) {
var initParams = {
el: params.el,
height: params.height || 60,
maxScale: params.maxScale || 200,
startValue: params.startValue || 0,
region: params.region || false,
background: params.background || false,
color: params.color || false,
markColor: params.markColor || "#FFCC33",
isConstant: params.isConstant || false
};
if (!initParams.el) {
console.warn("没有容器元素的参数");
return false;
}
var rulerWrap = document.getElementById(initParams.el); //获取容器
rulerWrap.style.height = initParams.height < 50 ? 50 + "px" : initParams.height + "px";
//最大刻度的小值是50
initParams.maxScale = initParams.maxScale < 50 ? 50 : initParams.maxScale;
if (initParams.startValue > initParams.maxScale) {
initParams.startValue = initParams.maxScale;
}
var minSildeNum = 0;//最小滑动的值
var maxSildeNum = initParams.maxScale;//最大滑动的值
if (initParams.region) {
minSildeNum = Math.floor(initParams.region[0]);
maxSildeNum = Math.floor(initParams.region[1]);
}
var count = initParams.startValue; //初始值
var winWidth = rulerWrap.offsetWidth; //容器宽度
var division = winWidth / 50; //每个刻度的距离 分割线
<