标签:CSS3 效果 放大镜 大图 transition 镜片 图片
其实代码并没有多少,这里用了6款静态资源图片作为示例,但是每一款都需要准备两个图片:一个是商品的小图(缩略图),另一个是商品的大图(放大后的图片)
html部分是不到一百行,图片可以替换成自己所需要的
具体逻辑实现在这个smoothproducts.js中,代码在两百多行。当鼠标悬停在缩略图上时,通过JavaScript显示放大镜镜片和大图,随着鼠标的移动,更新放大镜镜片的位置,以及大图的偏移量,从而实现放大效果
使用transition
属性为放大镜镜片的移动提供平滑的动画效果
具体效果呈现
代码下载地址以及预览地址
标签:CSS3,
效果,
放大镜,
大图,
transition,
镜片,
图片
From: https://blog.csdn.net/aixwl/article/details/143589760