原生JS实现类似《掘金》网站的图片查看器

经常看掘金网站发现他的图片预览挺不错的,跟以前的 fancyBox 插件效果差不多。在这里我为大家提供一些编写思路。

  • 记录页面的图片所在位置offsetTop / offsetLeft / width /height。
  • 创建div层铺满整屏幕。
  • 如果是加载大图需要显示loading。
  • 创建白色遮罩层。
  • 复制一份图片填充到屏幕之前记录的位置。
  • 根据屏幕算出中心位置并动画移动。
  • 点击关闭,返回到之前记录的位置即可,但是这里需要注意的是如果有滚动条则需要减去srcollTop的值,原因是动态创建的层和图片是position:fixed属性。
  • 滚动条滚动立即隐藏。

完整代码


"en">

"UTF-8">
图片预览




"margin:auto;width:1000px"> "https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
"https://user-gold-cdn.xitu.io/2018/5/13/16359c7b4fffa97c?imageslim" class="image">
复制代码

DEMO: jinzhe.github.io/todo/image-…

原文:im.zee.kim/post/79/

转载于:https://juejin.im/post/5afa7c6df265da0b7f44b2ea

你可能感兴趣的:(原生JS实现类似《掘金》网站的图片查看器)