【JavaScript吉光片羽】--- 滑动条

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

var Bar = function (opt) {var defaults = {$id: "", // 进度条dom节点idmin: 1, // 刻度最小值stepCount: 5, // 刻度步数step: 1, // 刻度步长$alpha: "",//显示亮度的idtouchEnd: 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);}
};
View Code

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: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
}
.slider_box_slider {position: absolute;height: 33px;top: 0;left: 0;z-index: 1;-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: 0;left: 0;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节点idmin: 1, // 刻度最小值stepCount: 5, // 刻度步数step: 1, // 刻度步长$alpha: "",//显示亮度的idtouchEnd: 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);}
};
View Code

css：

.slider_box_slider_up {position: absolute;width: 33px;top: 0;right: -20px;z-index: 1;-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: 0;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:0;left: 0;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事件。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/397054.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ldd /usr/bin/mysql_mysql客户端登录时报mysql: relocation error错误

ldd /usr/bin/mysql_mysql客户端登录时报mysql: relocation error错误

在安装了xtrabackup后&#xff0c;再用下列命令登录时报下列错误[rootlocalhost ~]# mysql -u root -pmysql: relocation error: mysql: symbol strmov, version libmysqlclient_16 not defined in file libmysqlclient.so.16 with link time reference解决方法&#xff1a;查看…
阅读更多...
python语言用什么关键字来声明一个类_python使用什么关键字定义类

python语言用什么关键字来声明一个类_python使用什么关键字定义类

什么是类&#xff1f; 用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。 什么是方法&#xff1f; 类中的函数即为方法 如何定义一个类&#xff1f; 定义类&#xff0c;语法格式如下&#xff1a;class ClassName:. . .…
阅读更多...
谷歌+安卓，他已经改变了世界两次，但还想多来几次

谷歌+安卓，他已经改变了世界两次，但还想多来几次

回望拉里佩奇的创业经历&#xff0c;小巴发现他在几个创业者最有可能犯&#xff08;si&#xff09;错&#xff08;bi&#xff09;的节点上都处理得很好。 你还记得你用的第一个搜索网站是什么吗&#xff1f; Google.com 讲到它的创始人&#xff0c;一般要连起来念&#xff0c; …
阅读更多...
centos7 DNS服务器搭建

centos7 DNS服务器搭建

DNS&#xff0c;全称Domain Name System&#xff0c;即域名解析系统。 DNS帮助用户在互联网上寻找路径。在互联网上的每一个计算机都拥有一个唯一的地址&#xff0c;称作“IP地址”&#xff08;即互联网协议地址&#xff09;。由于IP地址&#xff08;为一串数字&#xff09;不方…
阅读更多...
lisp中怎样调取图形_CAD的lisp程序已加载，怎样绘图？

lisp中怎样调取图形_CAD的lisp程序已加载，怎样绘图？

回答&#xff1a;1.计算所有线段总长度(加载后只需框选所有线段便可得出这些线段的总长度)(defun c:LL ()(setvar "cmdecho" 1)(setq en (ssget(list (0 . "spline,arc,line,ellipse,LWPOLYLINE"))))(setq i 0)(setq ll 0)(repeat (sslength en)(setq ss (…
阅读更多...
Java Web的web.xml文件作用及基本配置（转）

Java Web的web.xml文件作用及基本配置（转）

其实web.xml就是asp.net的web.config一个道理。 说明&#xff1a; 一个web中完全可以没有web.xml文件&#xff0c;也就是说&#xff0c;web.xml文件并不是web工程必须的。 web.xml文件是用来配置&#xff1a;欢迎页、servlet、filter等的。当你的web工程没用到这些时&#xff0…
阅读更多...
stand up meeting 12/21/2015

stand up meeting 12/21/2015

part组员 工作 工作耗时/h明日计划工作耗时/h UI冯晓云 完成PDF UI主页面的页面切换功能&#xff0c;待完善 4 完善页面切换&#xff0c;修补弹窗bug 4foxit PDF Reader朱玉影 修改了对pdf中文本进行搜索的代码&#xff0c;使其更加robust 4 pdf…
阅读更多...
python快速检测视频跳过帧_使用Python实现跳帧截取视频帧

python快速检测视频跳过帧_使用Python实现跳帧截取视频帧

本文实例为大家分享了Python跳帧截取视频帧的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 可以自由设定时长来截取视频&#xff0c;经实测效果理想。期间遇到的一个麻烦是我的视频文件在D:盘&#xff0c;在原视频D盘目录上不能保存截取的图片文件&#xff0c;后改…
阅读更多...
BZOJ3999: [TJOI2015]旅游

BZOJ3999: [TJOI2015]旅游

BZOJ3999: [TJOI2015]旅游 Description 为了提高智商&#xff0c;ZJY准备去往一个新世界去旅游。这个世界的城市布局像一棵树。每两座城市之间只有一条路径可以互达。每座城市都有一种宝石&#xff0c;有一定的价格。ZJY为了赚取最高利益&#xff0c;她会选择从A城市买入再转手…
阅读更多...
一张图看懂单机/集群/热备/磁盘阵列(RAID)

一张图看懂单机/集群/热备/磁盘阵列(RAID)

单机部署(Standalone) 只有一个饮水机提供服务器&#xff0c;服务只部署一份 集群部署(Cluster) 多个饮水机同时提供服务&#xff0c;服务冗余部署&#xff0c;每个冗余的服务都对外提供服务&#xff0c;一个服务挂掉时依然可用 热备部署(Hot-swap) 只有一个桶提供服务&#xf…
阅读更多...
typescript vuex_Vue3+TypeScript完整项目上手教程

typescript vuex_Vue3+TypeScript完整项目上手教程

作者&#xff1a;TinssonTaihttps://juejin.im/post/6875713523968802829一个完整的Vue3Ts项目,支持.vue和.tsx写法 项目地址&#xff1a;https://github.com/vincentzyc/vue3-demo.gitTypeScript 是JS的一个超集&#xff0c;主要提供了类型系统和对ES6的支持&#xff0c;使用 …
阅读更多...
JS中window.showModalDialog()详解

JS中window.showModalDialog()详解

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 使用方法&#xff1a; vReturnValue window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue window.show…
阅读更多...
一个简单的javascript节流器实现

一个简单的javascript节流器实现

节流器 javascript的节流器主要用于延缓某些动作的执行&#xff0c;比如ajax请求&#xff0c;如果input框注册了input事件&#xff0c;那么当用户输入时就会持续的触发这个事件&#xff0c;如果回调函数中持续的通过ajax调用后台的接口&#xff0c;就会对服务器产生一定压力。这…
阅读更多...
一些会用到的知识

一些会用到的知识

为什么80%的码农都做不了架构师&#xff1f;>>> HtmlAgilityPack 用来解析HTML代码 microsoft.mshtml CsQuery 解析HTML代码 转载于:https://my.oschina.net/uwith/blog/813725
阅读更多...
eclipse怎么升级到java ee,如何为Java EE开发人员升级Eclipse？

eclipse怎么升级到java ee,如何为Java EE开发人员升级Eclipse？

Is there any non-painful way to upgrade an Eclipse installation? I have tried browsing the eclipse site but I cannot find an useful description.解决方案Add the update URL to your available sites:Window > Preferences > Install/Update > Available S…
阅读更多...
LeetCode 7 Reverse Integer（反转数字）

LeetCode 7 Reverse Integer（反转数字）

题目来源&#xff1a;https://leetcode.com/problems/reverse-integer/ Reverse digits of an integer. Example1: x 123, return 321Example2: x -123, return -321 解题思路&#xff1a; 其实这道题看起来非常简单&#xff0c;要实现也是几行代码的事。但是有个小问题容易被…
阅读更多...
各种蕴含算法思想的DP - 3

各种蕴含算法思想的DP - 3

内容中包含 base64string 图片造成字符过多&#xff0c;拒绝显示转载于:https://www.cnblogs.com/cmyg/p/9566723.html
阅读更多...
python图像对比_用python实现对比两张图片的不同

python图像对比_用python实现对比两张图片的不同

from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_location): """ 比较图片&#xff0c;如果有不同则生成展示不同的图片 参数一: path_one: 第一张图片的路径 参数二: path_two: 第二张图片的路径 参数三:…
阅读更多...
Kafka 分布式环境搭建

Kafka 分布式环境搭建

这篇文章将介绍如何搭建kafka环境&#xff0c;我们会从单机版开始&#xff0c;然后逐渐往分布式扩展。单机版的搭建官网上就有&#xff0c;比较容易实现&#xff0c;这里我就简单介绍下即可&#xff0c;而分布式的搭建官网却没有描述&#xff0c;我们最终的目的还是用分布式来解…
阅读更多...
Docker Machine搭建并加入节点

Docker Machine搭建并加入节点

对于集群服务器来讲&#xff0c;要在每台机器上手动安装Docker是一件及其痛苦的事情&#xff0c;还好有Docker Machine这一工具&#xff0c;Docker三剑客中的一角. 一、Docker Machine介绍 这个工具已经出了比较久了&#xff0c;Docker Machine官方介绍&#xff1a;https://doc…
阅读更多...
最新文章

Copyright @ 2022~2023