vue实现简单放大镜效果
本文实例为大家分享了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实现简单放大镜效果】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 科学养胃,别被忽悠,其实真的很简单
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树