3d相册弹出效果02

3d相册弹出效果02

在3d相册基本的布局完成之后，接下来需要完成的是鼠标拖拽的效果。

描述：鼠标向右移动，整个相册跟随鼠标旋转，向下移动时，整个相册的视角向下倾斜。

主要涉及到鼠标按下，移动和抬起三个事件：

鼠标按下事件：

$(document).mousedown(function(e){

var x = e.clientX;     //获取鼠标按下点的坐标

var y = e.clientY;       

});

鼠标移动事件： 

         $(this).mousemove(function(e){

               //鼠标移动会产生新的当前坐标

               //用当前鼠标的坐标 --   前一刻鼠标的坐标，即位移作为整个相册跟随鼠标移动旋转的角度

             var xN = e.clientX - x;       //当前鼠标X轴位移 - 前一刻鼠标X轴位移

             var yN = e.clientY - y;

//鼠标点击处坐标作为起点，那么X轴的位移就可以作为整个相册沿Y轴旋转的角度，整个相册本身沿Y轴旋转的角度为0

//Y轴的位移作为整个相册沿X轴旋转的视角，初始视角为-15deg，即：

degX -= yN*0.2;

degY +=xN*0.2;

//乘以0.2的原因是避免旋转的角度太大，移动太快.

知道了整个相册跟随鼠标移动，本身需要旋转的角度之后，只需要赋值即可

$(“.container”).css(“transform”,’perspective(800px) rotateX(‘+degX+’deg) rotateY(‘+degY+’deg)’);

});

将perspective(800px)动态写入transform属性中的原因是：整个相册在跟随鼠标移动的过程中，视角也会随着该表，若不动态写入，则整个相册照片大小不会动态改变。

 

动态赋值完成之后，保存鼠标当前坐标，作为下一个当前坐标的对照值：

x = e.clientX;

y = e.clientY;