市面上基本上所有的购物平台、商城上的商品详情页,对于商品的图片都是有放大功能。那么这个功能主要是怎么实现的呢?CSS3实现放大镜效果主要依赖于CSS的一些高级特性,如transform
、transition
和::before
伪元素等
其实代码并没有多少,这里用了6款静态资源图片作为示例,但是每一款都需要准备两个图片:一个是商品的小图(缩略图),另一个是商品的大图(放大后的图片)
html部分是不到一百行,图片可以替换成自己所需要的
具体逻辑实现在这个smoothproducts.js中,代码在两百多行。当鼠标悬停在缩略图上时,通过JavaScript显示放大镜镜片和大图,随着鼠标的移动,更新放大镜镜片的位置,以及大图的偏移量,从而实现放大效果
使用transition
属性为放大镜镜片的移动提供平滑的动画效果
具体效果呈现
代码下载地址以及预览地址