我正在尝试创建一些交互式旋钮,就像你可以在老式电视和收音机中找到的那样.我正在使用KnobKnob.js来允许用户旋转.它有时表现得很奇怪,但由于缺乏可用于这种特殊需求的插件和我没有时间,我还是决定试一试.
我想做的是根据旋钮的矩形部分的旋转角度改变视频的来源,或者< div id =“centralKnob”>在我的代码中,复制Channels旋钮的行为.用户还应该只需单击周围的链接即可.
因此,我认为最好的方法是根据旋钮的当前旋转角度更改光源.由于我是JS / jQuery的新手,我不知道如何获得元素的角度,所以我环顾四周找到了this article.他们做了什么:
var el = document.getElementById("centralKnob");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"Either no transform set, or browser doesn't do getComputedStyle";
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var values = tr.split('(')[1];
whatever = tr.split(')')[0];
whatever = tr.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var angle = Math.round(Math.asin(b) * (180/Math.PI));
这应该给出旋钮的当前角度.
但是,如何在每次用户更改角度时重新计算角度,并且只要旋钮位于X(度)和Y(度)之间,视频源就会发生变化?
提前致谢.我也欢迎任何有关如何使整个工作更好的建议或建议,特别是如何让用户顺利旋转旋钮.此外,我知道旋转拨号盘和旋钮在网页设计中不是一个好主意,并不是用鼠标控制的最好的东西,但这比实际的公共网站更具技术挑战.
解决方法:
我过去做过这样的事情.
(通过一些调整,应该可以创建旋钮.)
我为移动设备添加了触摸事件
var dragging = false
$(function() {
init();
var target = $('#target')
var offset_x = -256;
var offset_y = 356;
var angle = 0;
var startAngle;
var slices = 8;
var sliceAngle = 360 / slices;
target.mousedown(function(e) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
dragging = true
startAngle = ((radians * (180 / Math.PI) * -1) + 90) - angle;
})
$(document).mouseup(function() {
dragging = false;
var slice = (angle + (sliceAngle/2)) / sliceAngle;
if(slice < 0){
slice = 12 + slice;
}else if(slice > 12){
slice = 12 - slice;
}
// Move circle in perfect position
angle = (Math.floor(slice) * (360 / slices));
target.css('-moz-transform', 'rotate(' + angle + 'deg)');
target.css('-moz-transform-origin', '50% 50%');
target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
target.css('-webkit-transform-origin', '50%, 50%');
target.css('-o-transform', 'rotate(' + angle + 'deg)');
target.css('-o-transform-origin', '50% 50%');
target.css('-ms-transform', 'rotate(' + angle + 'deg)');
target.css('-ms-transform-origin', '50% 50%');
alert(Math.floor(slice));
})
$(document).mousemove(function(e) {
if (dragging) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
angle = degree - startAngle;
if(angle < 0){
angle = 360 + angle;
}else if(angle > 360){
angle = 360 - angle;
}
target.css('-moz-transform', 'rotate(' + angle + 'deg)');
target.css('-moz-transform-origin', '50% 50%');
target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
target.css('-webkit-transform-origin', '50%, 50%');
target.css('-o-transform', 'rotate(' + angle + 'deg)');
target.css('-o-transform-origin', '50% 50%');
target.css('-ms-transform', 'rotate(' + angle + 'deg)');
target.css('-ms-transform-origin', '50% 50%');
}
})
})
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}