前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转。
大家先看效果
这酷炫的效果,你怎么看?
这次效果,咱们需要用JS实现。主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rotateX、rotateY
JS有哪些鼠标事件呢?
1、click:单击事件。
2、dblclick:双击事件。
3、onmousedown:鼠标按下时触发事件,不管按住左键/右键还是滑轮都可以
4、onmousemove:鼠标移动实时触发事件
5、onmouseup:鼠标松开时触发事件
6、mousemove:鼠标移动事件。
7、mouseover:移入事件。
8、mouseout:移出事件。
9、mouseenter:移入事件。
10、mouseleave:移出事件。
11、contextmenu:右键事件。
那需要监听哪些事件呢?了解了他们的作用,我们就知道如何处理了。
鼠标按下时,记录鼠标当前所处位置,移动时又可以获取实时位置,用移动时获取的实时位置减去鼠标按下时的位置,就可以得到鼠标移动的相对位置。鼠标松开,可以结束计算。
下面看看具体代码实现
示例代码
这里用到了Jquery,大家自行下载使用
这样就可以实现魔方跟随鼠标移动旋转了,但是大家可以看到上方的示例图,有一个展开和收起的效果,是如何实现的呢?
深入学习
之前咱们的魔方图是这样的
现在,画出2个魔方,一个小一点,使小的魔方刚好在大魔方中心位置
按照之前章节的样式,进行调节。使小的魔方刚好在大魔方中心位置。
样式如下:
然后我们通过JS控制展开和收起效果
OK,这样我们的 CSS3 3D魔方鼠标控制酷炫效果就实现了。
结语
大家学到了什么?JS鼠标事件都了解了吧?CSS3 3D场景都学会了吗?
关注我,学习更多前端知识,但不止于前端哦!
小伙伴们,有问题可以评论区留言哦,欢迎大家点评。需要源码的小伙伴可以购买,私信我哦。
谢谢大家一直以来的支持。
资源下载价格1元立即支付 或 升级VIP后免费升级VIP,支付前请先登录,支付前请先登录,支付前请先登录!
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!
VIP用户所有收费资源免费,登录后左上角点击 昵称,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!