原生JavaScript图片跟随鼠标点击放大3D展示效果
原生 JS 写的图片 3D 跟随交互,交互感挺强的。
鼠标一动,图片就跟着走;点一下还能放大,做个 3D 展示效果,看起来还蛮炫的。整体逻辑不复杂,主要用的是基本的 DOM 操作 和 鼠标事件监听,像 mousemove
和 click
这类事件用得比较多。
HTML 结构也就两个东西:一个 鼠标移动时,图片根据相对坐标计算偏移位置,用 CSS transform 做出缩放和位置偏移的效果。想搞点 3D 视觉的话,加个 放大效果触发也简单,一个 要注意的一点是放大图像出来后,记得在 你如果想搞点有趣的交互,比如产品展示页、图片浏览器、甚至在线商城的小图放大预览,这套方法就挺实用的。而且完全用 原生 JavaScript 写的,性能还不错,没啥额外依赖。 类似的鼠标交互资源也不少,比如:mousemove 鼠标跟动、跟鼠标移动的流星这种也可以顺手看看,说不定有灵感。
负责展示原图,一个 作为放大镜,透明背景,配合
position: absolute
控制位置,响应也快。perspective
和 rotateX/rotateY
之类的属性就行。click
事件,复制个大的
元素加进去,用 scale
放大。想做得高级点,还能加个 transition
搞点动效。mouseleave
的时候清除掉子元素,别让 DOM 越堆越多,内存就吃不消了。
下载地址
用户评论