知乎那个小小的图片鼠标有放大镜的功能咋做到的放图!
的实现是这样的:\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 就能很容易看到怎么实现的了。
推荐阅读
- 为啥知乎上普便有一种【我在北上广深打工,所以拥有更好的视野】这样的错觉
- 知乎有没有必要增加一个特别关注功能
- 知乎上关于人生经验的介绍是否可能对青少年造成潜在危害
- 你最希望看到的人民币头像是谁
- 像知乎豌豆夹这种新兴互联网公司发展的实际状况咋样
- 只看报纸、杂志、知乎、微博等文字而很少阅读书籍的人,和喜欢看书的延迟接受信息的人,哪种会比较优秀呢
- QQ那个戴头盔吸烟的表情有啥来历
- 315晚会为啥不提知乎买粉的那些人
- 关于安卓开发,知乎有哪些值得关注的人和收藏
- 本人大专毕业一年,想要去培训,定了JAVAEE和安卓两个方向,应该学那个纠结,求帮助