Magnifying glass effect implemented by native js

这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。

js放大镜效果 *{ margin:0px; padding:0px; border:none; list-style:none; } #box{ margin:80px auto; width: 352px; } #box p { width: 350px; height: 350px; border: 1px solid #ddd; margin-bottom: 5px; } #box p img { width:350px; height:350px; } #box h1 { width: 352px; height: 54px; overflow:hidden; position:relative; } #box h1 div { width:310px; height: 54px; margin:0px auto; position:relative; } #box h1 div ul { position:absolute; left: 0px; top: 0px; } #box h1 ul li { width: 62px; float: left; } #box h1 ul li img { width: 50px; height: 50px; padding: 1px; border: 1px solid #CECFCE; } #box h1 img.hoveredThumb{ border: 2px solid #e4393c; padding: 0; } /*中等大小的图片显示区域*/ p#medImgBox{ position: relative; } #jing{ position: absolute; left: 0; top: 0; width: 175px; height: 175px; border-radius:50%; background: #ffd; opacity: 0.7; display: none; } /*悬于图片/jing上方的专用于接收鼠标移动事件的 一个完全透明的层*/ #medImgBox #mian{ display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: move; opacity: 0; } /** 大图显示区域 **/ #largeImgBox{ position:absolute; width: 175px; height: 175px; border-radius:50%; border: 1px solid #faa; top: 0px; left: 352px; overflow: hidden; display: none; } #largeImg{ display: none; position: absolute; }

Magnifying glass effect implemented by native js

Related articles