知乎那个小小的图片鼠标有放大镜的功能咋做到的放图!

的实现是这样的:\u0026lt;img data-rawheight="720" data-rawwidth="973" src="http://pic4.zhimg.com/0f82fbc9c87b58d553f2c4b048e430df_b.jpg" class="origin_image zh-lightbox-thumb" width="973" data-original="http://pic4.zhimg.com/0f82fbc9c87b58d553f2c4b048e430df_r.jpg"\u0026gt;输出一张小图片,然后在 data-original 里面写出原图的 url。鼠标移动上去变成放大镜用的 cursor CSS 属性:.origin_image { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; cursor: url(/static/img/zoom-in.cur);}点击之后,当然就是一个弹一个浮层结构,把里面的 img 给替换成 data-original 里面的 img。其实你右击用 devtool 就能很容易看到怎么实现的了。


    推荐阅读