我试着让一个div像水中的船一样拖动,但是我在旋转方面遇到了一些麻烦.
这是我到目前为止：
jsFiddle
JS
var start,stop;
$('#canoe').draggable({
containment: '#board',cursor: 'none',cursorAt: {
top: 5
},drag: function (event,ui) {
start = ui.position.left;
setTimeout(function () {
stop = ui.position.left;
},150);
$('#canoe').css({
'transform': 'rotate(' + (start - stop) + 'deg)'
});
}
});
CSS
#board {
height:100%;
width:100%;
background:blue;
}
#canoe {
background: #fff;
border-radius:100% 100% 100% 100%;
height:60px;
width:10px;
position:absolute;
left:50%;
bottom:0;
transform-origin:top center;
transition: transform .2s;
}
HTML
<div id="board">
<div id="canoe">A</div>
</div>
有没有更好的方法来设置旋转,以便船的前部总是领先,即使360度旋转？
附加背景：我正在研究Basic Game
赏金更新：
我需要“船”能够在一个连续运动中被拖动成圆圈而不会翻转/切换旋转方向.
解决方法
这有点复杂,但这就是我要做的：
var save = false,timer;
$('#canoe').draggable({
containment: '#board',ui) {
if ( !save ) save = ui.offset;
var canoe = $('#canoe'),center_x = save.left + 5,center_y = save.top + 30,radians = Math.atan2(event.pageX - center_x,event.pageY - center_y),degree = (radians * (180 / Math.PI) * -1) + 180,time = Math.abs(ui.offset.top-save.top) + Math.abs(ui.offset.left-save.left);
canoe.css({
'-moz-transform' : 'rotate('+degree+'deg)','-webkit-transform' : 'rotate('+degree+'deg)','-o-transform' : 'rotate('+degree+'deg)','-ms-transform' : 'rotate('+degree+'deg)'
});
timer = setTimeout(function() {
clearTimeout(timer);
save = ui.offset;
},Math.abs( time-300 ) + 400 );
}
});
FIDDLE
它将当前鼠标位置与独木舟中心的位置进行比较.
时间根据鼠标的移动速度设置,因为较慢的移动需要较长的超时等.
清除超时以便它们不会积累也是一个好主意,即使在我测试它时它并不是真正的问题,并且Math.abs的使用确保它总是一个正整数.
我在CSS中添加了一些浏览器前缀.