js效果思路

Question

js新手，目前尝试一个站的放大镜js效果不清楚怎么做，请大家给点提示！谢谢大家

https://www.gucci.cn/zh/pr/49...

Answer 1

本身是一张2400*2400的图片，靠的是js操作css动画放大缩小

Answer 2

js监听鼠标移动，控制css样式，大致思路就是这样了吧

Answer 3

流程：

1、图片监听 click 事件，触发后显示完整的大图
2、显示方式使用position:fixed;做一个铺满页面的div，然后把大图放进去
3、在大图上监听鼠标滚动事件，鼠标滚轮事件使用参考：http://www.zhangxinxu.com/wor... 上滚下滚改变图片的宽高即可（可以使用transition过渡或者你使用jquery的话使用animate，可以增强显示的效果）
4、鼠标移动，图片显示位置也移动 这个效果就是明显的将大图在div中定位使用position:absolute/relative;然后监听mousemove事件,根据鼠标移动的pageX和pageY改变图片显示的位置（如top/left）从而实现鼠标移动，图片显示也移动的效果
5、在大图上需要监听一个click事件，点击后隐藏掉div

基本思路就是上面的，我觉得关键就是第二点中，你需要将你的图片和div容器很好的布局。这样子你操作起来就方便的多。

下面是一个简单的图片放大镜，只是放大。但是布局方式差不多。

http://postbird.oschina.io/po...

差不多在这个布局方式上监听该监听的事件即可。

你给的demo网站中是通过 transform 的 translate3d(-141.8px, -268px, 0px) scale3d(1.06, 1.06, 1)控制的，你可以审查元素看一下