美文网首页Web前端之路Web 前端开发
JS做一个简单的放大镜demo

JS做一个简单的放大镜demo

作者: 落叶追风 | 来源:发表于2017-02-23 13:01 被阅读192次

先上一张效果图：


pic.png

分析过程：

  1. H5部分：
  • 左右两个大div盒子用以显示图片
  • 左边的盒子内部嵌入一个放大镜盒子，放大镜盒子用以控制右边盒子图片显示的范围
  1. CSS部分：
  • 左右两个大的div盒子宽高一致，具有相同的背景且背景的大小应与盒子等大
  • 右边的背景为盒子的4倍
  • 放大镜宽高设置为父级的1/4
  1. JS部分：
  • 实现元素的拖拽（放大镜在左边的盒子内部拖动）
  • 根据放大镜的左上角的坐标设置右边盒子背景图的起点坐标（*4）

**PS: ** 以上元素的宽高，倍数，背景图的大小等根据个人需求设置，为了简单的达到效果，我设置的比较随意。

<strong>下载地址：https://github.com/frankxjkuang/magnifier-demo</strong>

相关文章

网友评论

    本文标题：JS做一个简单的放大镜demo

    本文链接：https://www.haomeiwen.com/subject/xvzvwttx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Web前端之路

    Web 前端开发

    关于我们|服务条款|联系我们|JS做一个简单的放大镜demo|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！