Имеется фоновое изображение. Перетаскивается мышкой. Поворачивается и увеличивается ползунками путем изменения соответствующих CSS3 свойств. Проблема заключается в следующем: после перетаскивания (изменения background-position) перестает работать один из ползунков.
//********** ИНИЦИАЛИЗИРУЮ ПОЛЗУНКИ *********
$( "#scale-slider" ).slider({
animate: true,
min: 50,
max: 300,
value: 100,
slide: function(event, scale) {
$('#look-up-background').css('background-size', scale.value + '%');
$('#look-up-background').css('-moz-background-size', scale.value + '%');
$('#look-up-background').css('-o-background-size', scale.value + '%');
$('#look-up-background').css('-webkit-background-size', scale.value + '%');
}});
$( "#rotate-slider" ).slider({
animate: true,
min: 0,
max: 180,
slide: function(event, rotate) {
$('#look-up-background').css('transform', 'rotate(' + rotate.value + 'deg)');
$('#look-up-background').css('-webkit-transform', 'rotate(' + rotate.value + 'deg)');
$('#look-up-background').css('-ms-transform', 'rotate(' + rotate.value + 'deg)');
$('#look-up-background').css('-moz-transform', 'rotate(' + rotate.value + 'deg)');
$('#look-up-background').css('-o-transform', 'rotate(' + rotate.value + 'deg)');
}});
//****** ДЕЛАЮ ПРИНТ ПЕРЕТАСКИВАЕМЫМ *******
$('#look-up-blank').mousedown(function(e){
$(document).unbind('mouseup');
var f = $('#look-up-blank').offset(),
x = e.pageX - f.left,
y = e.pageY - f.top;
$(document).mousemove(function(a){
$('#look-up-background').css('background-position-x', a.pageX - x + 'px');
$('#look-up-background').css('background-position-y', a.pageY - y + 'px');
});
return false;
});
$('#look-up-blank').mouseup(function(){
$(document).unbind('mousemove');
});
Посмотреть как работает можно здесь
http://slash-dot-dash.com/look-up
