Good morning everyone. There was such a task before me: When dragging a block, it should become transparent, and blur the image behind it. I have never come across this before, so I solved the problem like this: When you hover a block on a picture, I assign this picture to him on the background, and I'm already eroding it. And when moving, I just change the position of the background. Here it is: http://jsfiddle.net/BynX4/15/
$(document).ready(function() { $('.qwe').draggable({ revert: 'invalid' }); $( ".qwe" ).mouseup(function() { }); $( "*" ).mousemove(function( event ) { if(parseInt($(".qwe").css("top"), 10) > 30 && parseInt($(".qwe").css("top"), 10) < 600 && parseInt($(".qwe").css("left"), 10) > -132 && parseInt($(".qwe").css("left"), 10) < 550) { $(".qwe").css("background","url(http://cs14107.vk.me/c540104/v540104856/8536/9V4EgXtH7RU.jpg) no-repeat"); $(".qwe").css("background-position-x",-parseInt($(".qwe").css("left"))); $(".qwe").css("background-position-y",-parseInt($(".qwe").css("top"))+100); $(".qwe").css("-webkit-filter","blur(5px)"); } else { $(".qwe").css("background","white"); $(".qwe").css("-webkit-filter","blur(0)"); } }); }); (move the square around the cat). The question is - can this be done in a human way, and not in the way that I do it?
