图片点击放大,你的网页也能做到!

图片点击放大,你的网页也能做到!

发布于 2018-07-28 05:27 更新于 2018-08-12 06:52

我经常在博客中插入大图,然而总需要借助浏览器的滚轮缩放功能放大观看实在是不方便。于是我希望做一个点击即放大的功能。


下面就是一张可点击放大的图片,你可以点击试试!当然,我期望的效果是自动对所有博客中的图片生效。

▲ Fluent Design App Header

创建一个用于放图片的 HTML 节点

如果你是普通的 HTML 网页,可以将下面的片段放入到你的页面中。

<div id="image-cover-modal" class="image-cover-modal">
  <img id="image-cover-image" class="image-cover-modal-content">
  <div id="image-cover-caption"></div>
</div>

最外层是容器,里面包含一个关闭按钮,一张图片和一个图片标题。

为图片的 HTML 节点添加 CSS 样式

.image-cover-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    transition: opacity ease 0.3s;
    pointer-events: none;
}

.model-shown {
    pointer-events: all;
    opacity: 1;
}

.image-cover-modal-content {
    display: block;
    max-width: 80%;
    max-height: 80%;
}

#image-cover-caption {
    display: block;
    position: absolute;
    width: 100%;
    height: 3rem;
    bottom: 0;
    line-height: 3rem;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.33);
}

@media only screen and (max-width: 45rem){
    .image-cover-modal-content {
        max-width: 100%;
        max-height: 100%;
    }
}

添加放大图片的 JS 脚本

// Get the DOM
var modal = document.getElementById('image-cover-modal');
var modalImg = document.getElementById("image-cover-image");
var captionText = document.getElementById("image-cover-caption");
var span = document.getElementsByClassName("image-cover-close")[0];

// When the user clicks on <span> (x), close the modal
modal.onclick = function() {
    this.classList.remove("model-shown");
}

var i;
for (i = 0; i < document.images.length; i++) {

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.images[i];

    img.onclick = function(){
        modal.classList.add("model-shown");
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}

专为 Jekyll 设计的简化版本

如果你使用 Jekyll 搭建静态网页,那么只需要修改 3 个地方:

  • 在 main.css 中添加前面的 css 片段。
  • 在你想要添加放大图片的页面布局(例如 post.html)中添加 {% include clickable-image.html %}
  • 在 _includes 文件夹中添加一个 clickable-image.html 文件,存放以下内容。
<div id="image-cover-modal" class="image-cover-modal">
  <img id="image-cover-image" class="image-cover-modal-content">
  <div id="image-cover-caption"></div>
</div>
<script>
// Get the DOM
var modal = document.getElementById('image-cover-modal');
var modalImg = document.getElementById("image-cover-image");
var captionText = document.getElementById("image-cover-caption");
var span = document.getElementsByClassName("image-cover-close")[0];

// When the user clicks on <span> (x), close the modal
modal.onclick = function() {
    this.classList.remove("model-shown");
}

var i;
for (i = 0; i < document.images.length; i++) {

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.images[i];

    img.onclick = function(){
        modal.classList.add("model-shown");
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}
</script>

你可以参考我的文件:


参考资料

本文会经常更新,请阅读原文: https://walterlv.com/post/create-click-to-zoom-image-for-web-pages.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 (walter.lv@qq.com)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

Smobiler 4.4 更新预告 Part 2(Smobiler能让你在Visual Studio上开发APP)

Hello Everybody,在Smobiler 4.4中,也为大家带来了新增功能和插件(重点,敲黑板)。

13230
来自专栏Material Design组件

Human Interface Guidelines —— Buttons

15960
来自专栏逸鹏说道

前端常用插件

插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 Thea...

70260
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

25840
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Groceries

课程内容 Ø Panarama控件     Groceries是一个简易的购物清单应用程序,我们可以用它来一步一步建立自定义的购物清单。根据个人的喜好,我们...

19450
来自专栏小文博客

前端利器——Fscapture

《FSCapture》是一款抓屏工具,体积小巧、功能强大,不但具有常规截图等功能,更有从扫描器获取图像,和将图像转换为 PDF文档等功能。

43990
来自专栏知晓程序

开发 | 小程序不够「高级」?那是因为你没用上这 3 个特效!

最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成。

13030
来自专栏葡萄城控件技术团队

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

作为一款纯前端控件集,WijmoJS 秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球...

16220
来自专栏娱乐心理测试

移动端图标生成工具

16300
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

30120

扫码关注云+社区

领取腾讯云代金券