下面的动画展现了通过两个代表x、y轴的滑块来实现图形的平移效果动画,本文介绍怎么来实现这样的滑块。
示例通过ul列表结构组织,每个li元素的内容表示一个滑块,每个滑块包含名称、滑块和值三部分内容,其中滑块使用input元素即可实现,只需要将type设置为range即可。
-
x
399
-
y
312
整个滑块组通过绝对定位的方式将其定位在web页面的右上角,取消ul列表的默认列表样式,每个滑块的名称、滑块、值居中对齐,只需要简单几个css样式就可以达到这个效果。
/*将toolbox容器绝对定位到web页面右上角*/
#toolbox {
position: absolute;
top: 0;
right: 0;
margin: 1rem 2rem;
opacity: 0.6;
}
/*不显示ul任何列表样式*/
#toolbox ul {
list-style-type: none;
}
/*居中对齐滑块名称、滑块、值*/
#toolbox ul li {
display: flex;
align-items: center;
}
接下来,还需要通过js代码添加滑块监听处理方法,实时更新滑块的值,并提供回调入口供应用使用该滑块。这里通过TypeScript来实现,代码如下:
export class xinUI {
// 创建滑块组件
setupSlider(parent_selector: string, options: any) {
var parent = document.querySelector(parent_selector);
// 从options中提取滑块的名称、最小、最大值、当前值等,不存在的则取默认值
var name = options.name;
var min = options.min || 0;
var max = options.max || 1;
var callback = options.callback;
var value = options.value || 0;
// 创建一组滑块
var elm_li = document.createElement("li");
elm_li.innerHTML = `
${name}
${value}`;
parent.appendChild(elm_li);
var elm_slider = elm_li.querySelector(".xin-widget-slider");
var elm_value = elm_li.querySelector(".xin-widget-value");
// 更新显示滑块的值
updateValue();
// 添加input、change事件,实时改变滑块的值并回调options指定的方法
elm_slider.addEventListener("input", handleChange);
elm_slider.addEventListener("change", handleChange);
function updateValue() {
elm_value.textContent = value;
}
function handleChange(event) {
value = event.target.value;
updateValue();
// 供用户回调
callback(event, {value: value});
}
}
};
下面的示例在web页面的右上角创建两个滑块代表x、y坐标,滑动滑块将在控制台打印滑块的值。
index.html
滑块组件使用示例
main.ts
import { xinUI } from "./slider-ui.js";
function main() {
var translation = [10, 30];
// 创建x、y平移滑块
var myUI = new xinUI();
myUI.setupSlider("#toolbox ul", {name: "x", max: 100, value: translation[0], callback: updatePosition(0)});
myUI.setupSlider("#toolbox ul", {name: "y", max: 100, value: translation[1], callback: updatePosition(1)});
function updatePosition(index) {
return function(event, ui) {
translation[index] = parseInt(ui.value);
//以下为应用处理的代码,这里仅打印其信息以示例
console.log(translation[index]);
}
}
}
main();
export {};
页面更新:2024-03-20
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号