请选择 进入手机版 | 继续访问电脑版

玩转JQuery来实现放大镜效果

[复制链接]
听见深浅 发表于 2021-1-1 18:34:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
现在盛行的放大镜效果,在很多企业网站以及一些商城网站被广泛使用,下面我们一起看看如何来实现它吧,出色继续,敬请等待~
  1.             Document                *{            margin: 0;            padding: 0;        }        #small{            width: 500px;            height: 500px;            border: 1px red solid;            position: relative;        }        #small img{            width: 500px;            height: 500px;        }        #big{            width: 500px;            height: 500px;            border: 1px red solid;            /* 滚动条自动溢出隐藏 */            /* overflow: auto; */            overflow: hidden;            margin-left: 10px;        }        #big img{            width: 1000px;            height: 1000px;        }        #box{            display: flex;        }        /* 遮罩层样式 */        #mask{            width: 150px;            height: 150px;            background: rgba(0, 0, 0, 0.3);            position: absolute;            top: 0;            left: 0;            display: none;        }                            [img]https://www.jianchenwangluo.com/./1.jpg[/img]            
  2.         
  3.                     [img]https://www.jianchenwangluo.com/./1.jpg[/img]        
  4.    
  5.    
复制代码
来源:https://blog.csdn.net/weixin_53587096/article/details/112054003
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )