我正在使用jQuery UI来拖放图像.我还想将图像旋转360度,这样我就可以像在Photoshop中一样移动和旋转它.我使用
jQuery rotate plugin在点击时旋转图像,但我想选择一个角并拖动以将图像旋转到任何角度.
直播JS：http://jsfiddle.net/87jaR/
JavaScript代码：
var test = 5;
$(function()
{
$('#rotate').draggable({ containment: 'frame' });
$('#frame img').live('mousedown',function(event)
{
test = test + 15;
$(this).rotate({ angle: test });
});
});
解决方法
请检查这个,fiddle
http://jsfiddle.net/prasanthkc/frz8J/
var dragging = false
$(function() {
var target = $('#target')
target.mousedown(function() {
dragging = true
})
$(document).mouseup(function() {
dragging = false
})
$(document).mousemove(function(e) {
if (dragging) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - 10,mouse_y - 10);
var degree = (radians * (180 / Math.PI) * -1) + 90;
target.css('-moz-transform','rotate(' + degree + 'deg)');
target.css('-moz-transform-origin','0% 40%');
target.css('-webkit-transform','rotate(' + degree + 'deg)');
target.css('-webkit-transform-origin','0% 40%');
target.css('-o-transform','rotate(' + degree + 'deg)');
target.css('-o-transform-origin','0% 40%');
target.css('-ms-transform','rotate(' + degree + 'deg)');
target.css('-ms-transform-origin','0% 40%');
}
})
})
1)这里deg表示度,你可以使用rad作为弧度
2)您可以通过更改transform-origin来更改旋转点
对于Eg：transform-origin：50％50％将旋转点移动到中心.