本文实例为大家分享了vue实现简单放大镜效果的具体代码，供大家参考，具体内容如下

*{margin: 0; padding: 0; }.imgMerror{position: relative; padding: 50px; .smallDiv{border: 1px solid #ccc; width: 360px; height: 360px; position: relative; left: 0; top: 0; img{width: 100%; height: 100%; }.imgMask{width: 240px; height: 240px; background: #00ff98; opacity: 0.5; cursor: move; position: absolute; left:0; top: 0; display: none; }}.bigDiv{border: 1px solid #ccc; width: 540px; height: 540px; position: relative; left: 380px; top: -360px; overflow: hidden; display: none; img{width: 600px; height: 600px; position: absolute; left: 0; top: 0; }}}

效果图：

文章图片

【vue实现简单放大镜效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。