jquery+CSS3实现3D拖拽相册效果

2020-05-18 08:45:00易采站长站整理

$(this).css({"transform":"rotateY("+i*deg+"deg) translateZ(350px)"});
$(this).attr("ondragstart","return false");//每张图片都禁止拖拽
});
$(document).mousedown(function(ev){
//每次都先清除定时器,防止混乱
clearInterval(play);
//获取当前点击处的坐标
var x_=ev.clientX;
var y_=ev.clientY;
$(this).bind("mousemove",function(ev){
//获取移动后的坐标
var x=ev.clientX;
var y=ev.clientY;
//获取移动后,当前坐标和前一坐标的距离差
xN=x-x_;
yN=y-y_;
//将距离差转变为容器旋转的数值
roY+=xN*0.2;
roX-=yN*0.1;
/*$("body").append("<div style='background:red;width:5px;height:5px;position:absolute;top:"+y+"px;left:"+x+"px;'></div>");
此处为方便看到效果*/
$("div.pic").css({
"transform":"perspective(800px) rotateY("+roY+"deg) rotateX("+roX+"deg)"
});
//将移动后的点设为前一点存放到x_,y_变量中
x_=ev.clientX;
y_=ev.clientY;
})
}).mouseup(function(){
//鼠标抬起时,解绑鼠标移动事件
$(this).unbind("mousemove");
//鼠标抬起时候,实现惯性缓冲效果
play=setInterval(function(){
//将距离插值慢慢变小,实现惯性缓冲
xN*=0.95;
yN*=0.95;
//向左拖动的时候,当前点与前一点的距离差是负值的,要取绝对值
//停止惯性
if(Math.abs(xN)<1&&Math.abs(yN)<1){
clearInterval(play);
}
//将距离差转为旋转角度
roY+=xN*0.2;
roX-=yN*0.1;
$("div.pic").css({
"transform":"perspective(800px) rotateY("+roY+"deg) rotateX("+roX+"deg)"
});
},30);
})
})