任何支持右/左/上/下的Jquery / Javascript滑块?

时间:2012-04-27 07:22:38

标签: javascript jquery jquery-plugins

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

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

enter image description here

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

1 个答案:

答案 0 :(得分: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; }

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