基于javascript实现放大镜特效
(编辑:jimmy 日期: 2024/12/23 浏览:3 次 )
本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下
我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } #min { width: 350px; height: 350px; border: 1px solid #ccc; position: absolute; left: 50px; top: 50px; } #min img { width: 350px; height: 350px; } #max { width: 500px; height: 500px; position: absolute; left: 500px; top: 50px; border: 1px solid #ccc; overflow: hidden; display: none; } #max img { position: absolute; left: 0; top: 0; } #mask { width: 200px; height: 200px; background: rgba(255, 0, 0, 0.5); position: absolute; left: 0px; top: 0px; cursor: pointer; display: none; } </style> </head> <body> <div id="min"> <img src="/UploadFiles/2021-04-02/min.jpg">效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:javascript实现时钟动画