任何支持右/左/上/下的 Jquery/Javascript 滑块？答案

【问题标题】：Any Jquery/Javascript Slider which support Right/Left/Top/Bottom?任何支持右/左/上/下的 Jquery/Javascript 滑块？
【发布时间】：2012-04-27 07:22:38
【问题描述】：

我正在寻找一个支持右/左/上/下的 Jquery/Javascript 插件。

我不知道问这个问题的确切措辞，但这张图片可以帮助您理解我的问题。

如您所见，我希望能够显示方向元素

【问题讨论】：

这些箭头的具体用途是什么？你在找什么样的插件？
Slider 来滑动什么？大文本，大框架中的图像？
@F.Calderan，这些箭头的目的是提供价值。假设初始值为 {x:0, y:0}。现在，单击左箭头将为您提供值 {x: -1, y: 0}。现在，点击顶部将给出值，{x: -1, y: 1} 等等。
var point = { x : 0, y : 0 }; $("#buttonUp").click(function() { point.y++; }); $("#buttonDown").click(function() { point.y--; }); $("#buttonLeft").click(function() { point.x--; }); $("#buttonRight").click(function() { point.x++; }); 那你还需要什么？
@VisioN，感谢寻找现有插件。类似于 Jquery Slider

标签： javascript jquery jquery-plugins

【解决方案1】：

看这个例子小提琴：http://jsfiddle.net/9AtMB/
打开你的 JavaScript 控制台

html

<div>
    <a href="#" data-y="1" data-x="0">Up</a>
    <a href="#" data-y="-1" data-x="0">Down</a>
    <a href="#" data-x="-1" data-y="0">Left</a>
    <a href="#" data-x="1" data-y="0">Right</a>
</div>

js/jQuery

var offset =  { x: 0, y: 0 };
$('a').on('click', function(evt) {
   evt.preventDefault();
   offset.x += ~~$(this).data('x');
   offset.y += ~~$(this).data('y');
   console.log(offset);
});

Css（最小）

div { width: 200px; height: 200px; position: relative; }
a { position: absolute; z-index: 1; }
a[data-y="1"] { top : 0; left: 50%; }
a[data-y="-1"] { bottom : 0; left: 50%; }
a[data-x="-1"] { top : 50%; left: 0; }
a[data-x="1"] { top : 50%; right: 0; }

使用图形箭头更改标签的练习留给您。

【讨论】：

这对我不起作用。查看控制台。现在可以使用了，谢谢
我用的是FF11，效果很好。请注明“不工作”