没想到刚开始没两天就突然断了。还是要时刻鞭策自己啊。
主要实现效果:鼠标从不同的方向进入图片,图片所在的正方体就会以此方向翻转,显示文字介绍。
效果如下图
此处的正方体只是形象的比喻方便理解。
如下图为计算机的坐标系,文字介绍所在块(后面简称B)与图片块(后面简称A)放于同一平面,但在Z轴上相差2px。
A与B被包在块C之中。
- 图片旋转
当鼠标从上侧进入时,思路是先将后侧的B向上移动自身长度的距离,然后向上绕y轴向屏幕内侧旋转90度,得到A与B垂直的效果,即A仍在xoy平面,而B在yoz平面(具体什么样子,就不画图了。实在是画出来太难看了。)此时,若直接旋转C,就可以达到同时旋转A与B的效果,让C向下绕y轴向屏幕内侧旋转90度,B就会旋转到xoy平面,平行于屏幕,A就会旋转到yoz平面,垂直于屏幕。
当鼠标从其他三个方向进入时的思路与上侧进入的思路相类似,只是方向不同。
- 鼠标进入方向的确定
当明确了A与B的旋转之后,就要考虑如何获取鼠标是从哪个方向进入的了。
首先,我们重新创建一个坐标轴,以图片即A的中心为坐标原点,如下图所示。
然后我们只需要知道鼠标当前的坐标在我们的新坐标系中的位置即可。
var width,//图片宽度 |
知道了鼠标在新坐标系中的位置后,接下来就需要计算鼠标进入的方向了。
d=(Math.round(((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4; |
解决了这个问题,剩下的就是简单的DOM操作了。下面附上源码。
(完)