jquery回弹_jQuery 物体拖拉回弹的动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(document).ready(function() {

var $test = $(".test"),

xPos,

yPos;

$(document).on("mousedown", ".test", function(evt) {

$(this).addClass("active").removeClass("transitioned");

var realTop = parseInt($(this).offset().top, 10),

realLeft = parseInt($(this).offset().left, 10);

xPos = evt.pageX - realLeft;

yPos = evt.pageY - realTop;

$(document).on("mousemove", function(e) {

if ($test.hasClass("active")) {

var x = e.pageX,

y = e.pageY,

realX = x - xPos,

realY = y - yPos,

newX = realX - realLeft,

newY = realY - realTop;

$test.css("transform", "translateX(" + newX + "px) translateY(" + newY + "px)");

};

});

function mouseUpFunc(e) {

var x = e.pageX,

y = e.pageY,

realX = x - xPos,

realY = y - yPos,

newX = parseInt(Math.floor((0 - (realX - realLeft)) / 3), 10),

newY = parseInt(Math.floor((0 - (realY - realTop)) / 3), 10),

smallX = parseInt(Math.floor((realX - realLeft) / 5), 10),

smallY = parseInt(Math.floor((realY - realTop) / 5), 10),

dispX = parseInt(Math.floor((realX - realLeft) / 10), 10),

dispY = parseInt(Math.floor((realY - realTop) / 10), 10);

if ($test.hasClass("active")) {

$test.removeClass("active").addClass("transitioned");

if (newX || newY) {

$test.css("transform", "translateX(" + (newX - dispX) + "px) translateY(" + (newY - dispY) + "px)");

setTimeout(function() {

$test.css("transform", "translateX(" + (newX + dispX) + "px) translateY(" + (newY + dispY) + "px)");

}, 380);

setTimeout(function() {

$test.css("transform", "translateX(" + smallX + "px) translateY(" + smallY + "px)");

}, 420);

setTimeout(function() {

$test.css("transform", "translateZ(0)");

}, 700);

}

}

}

$(document).on("mouseup", function(e) {

mouseUpFunc(e);

});

return false;

});

});