- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一些交互式旋钮,就像您可以在老式电视和 radio 中找到的那样。我正在使用 KnobKnob.js允许用户旋转。它有时会表现得很奇怪,但鉴于可满足这种特殊需求的插件很少,而且我没有时间,我还是决定试一试。
我想做的是根据旋钮矩形部分的旋转 Angular 或<div id="centralKnob">
更改视频源。在我的代码中,复制 Channels 旋钮的行为。用户还应该能够仅单击周围的链接来执行此操作。
因此,我认为最好的方法是根据旋钮的当前旋转 Angular 更改源。由于我是 JS/jQuery 的新手,我不知道如何获取元素的 Angular ,所以我环顾四周,发现 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));
这应该给出旋钮的当前 Angular 。但是,我该如何做到这一点,以便在每次用户更改 Angular 时重新计算 Angular ,并且只要旋钮位于 X(deg) 和 Y(deg) 之间,视频源就会发生变化?
提前致谢。我也欢迎任何关于如何使整个事情更好地工作的建议或建议,尤其是如何让用户平滑地旋转旋钮。此外,我知道旋转拨号盘和旋钮在网页设计中不是一个好主意,也不是用鼠标控制的最佳选择,但这比实际的公共(public)网站更具技术挑战。
最佳答案
我以前做过类似的东西。
(通过一些调整应该可以创建一个旋转旋钮。)我为移动设备添加了触摸事件
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);
}
关于javascript - 在 jQuery/JS 中旋转时触发事件的旋钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18427573/
我正在尝试将 WPF CodeBehid 事件(如 Event、Handler、EventSetter)转换为 MVVM 模式。我不允许使用 System.Windows.Controls,因为我使用
我可能误解了 Backbone 中的事件系统,但是当我尝试以下代码时什么也没有发生。当我向 Backbone.Events 扩展对象添加新属性时,它不应该触发某种更改、更新或重置事件吗?就像模型一样吗
我遇到了一个简单的问题,就是无法弄清楚为什么它不起作用。我有一个子组件“app-buttons”,其中我有一个输入字段,我想听,所以我可以根据输入值过滤列表。 如果我将输入放在我有列表的根组件中,一切
System.Timers.Timer 的 Elapsed 事件实际上与 System.Windows.Forms.Timer 的 Tick 事件相同吗? 在特定情况下使用其中一种比使用另一种有优势吗
嗨,这个 javascript 代码段是什么意思。(evt) 部分是如此令人困惑.. evt 不是 bool 值。这个怎么运作? function checkIt(evt) { evt
我正在使用jquery full calendar我试图在事件被删除时保存它。 $('calendar').fullCalendar ({
我有两个链接的鼠标事件: $('body > form').on("mousedown", function(e){ //Do stuff }).on("mouseup", function(
这是我的代码: $( '#Example' ).on( "keypress", function( keyEvent ) { if ( keyEvent.which != 44 ) {
我尝试了 dragOver 事件处理程序,但它没有正常工作。 我正在研究钢琴,我希望能够弹奏音符,即使那个键上没有发生鼠标按下。 是否有事件处理程序? 下面是我正在制作的钢琴的图片。 最佳答案 您应该
当悬停在相邻文本上时,我需要使隐藏按钮可见。这是通过 onMouseEnter 和 onMouseLeave 事件完成的。但是当点击另外的文本时,我需要使按钮完全可见并停止 onMouseLeave
我有ul标签内 div标签。我申请了mouseup事件 div标记和 click事件 ul标签。 问题 每当我点击 ul标签,然后都是 mouseup和 click事件被触发。 我想要的是当我点击 u
我是 Javascript 和 jQuery 的新手,所以我有一个非常愚蠢的疑问,请耐心等待 $(document).click(function () { alert("!"); v
我有一个邮政编码解析器,我正在使用 keyup 事件处理程序来跟踪输入长度何时达到 5,然后查询服务器以解析邮政编码。但是我想防止脚本被不必要地调用,所以我想知道是否有一种方法可以跟踪 keydown
使用事件 API,我有以下代码来发布带有事件照片的事件 $facebook = new Facebook(array( "appId" => "XXX", "se
首次加载 Microsoft Word 时,既不会触发 NewDocument 事件也不会触发 DocumentOpen 事件。当 Word 实例已打开并打开新文档或现有文档时,这些事件会正常触发。
我发现了很多相关问题(这里和其他地方),但还没有具体找到这个问题。 我正在尝试监听箭头键 (37-40) 的按键事件,但是当以特定顺序使用箭头键时,后续箭头不会生成“按键”事件。 例子: http:/
给定的 HTML: 和 JavaScript 的: var $test = $('#test'); $test.on('keydown', function(event) { if (eve
我是 Node.js 的新手,希望使用流运行程序。对于其他程序,我必须同时启动一个服务器(mongodb、redis 等),但我不知道我是否应该用这个运行一个服务器。请让我知道我哪里出了问题以及如何纠
我正在尝试使用 Swift 和 Cocoa 创建一个适用于 OS X 的应用程序。我希望应用程序能够响应关键事件,而不将焦点放在文本字段上/文本字段中。我在 Xcode 中创建了一个带有 Storyb
我有以下代码: (function(w,d,s,l,i){ w[l]=w[l]||[];w[l].push({
我是一名优秀的程序员,十分优秀!