这篇文章主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现多张图片放大镜效果。分享给大家供大家参考，具体如下：
效果如下：可以展示图片列表的放大镜效果，图片尺寸没有要求会自动调整至水平垂直居中效果
代码如下，除了图片要替换一下，其它的可直接运行查看效果，enlarge是图片要放大查看的倍数，注意：.bigBox的宽高与.tool的宽高比值要与enlarge保持一致，比如本例中这个比值是4
Document * { margin: 0; padding: 0; } /*图片放大镜*/ .result-list li { float: left; width: 3rem; margin: 0.15rem; border: 1px solid #ddd; padding: 0.08rem; border-radius: 0.05rem; list-style-type: none; } .result-list li:hover { box-shadow: 0 0 10px 5px #ddd; } .img-to-big { width: 100%; height: 1.5rem; margin: 0 auto; } .small-box { width: 100%; height: 1.5rem; border: 1px #ccc solid; cursor: move; position: relative; vertical-align: middle; display: block; } .small-box img { max-width: 100%; max-height: 100%; margin: auto; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .tool { width: 1rem; height: 1rem; background-color: lightgray; opacity: 0.6; filter: alpha(opacity=60); position: absolute; left: 0; top: 0; display: none; } .tool.active { display: block; } .big-box { width: 4rem; height: 4rem; overflow: hidden; border: 2px solid lightgray; position: absolute; background: #fff; display: none; left: 3rem; z-index: 100; } .big-box.active { display: table-cell; vertical-align: middle; } .big-box img { position: absolute; display: block; } /*图片放大镜*/
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】的详细内容，更多请关注本站其它相关文章！
