html点击按钮切换图片代码_样式演武场 | 无缝拼接更显高级，教你用代码实现（下）...

不做运营孤岛，在这里发现新大陆
福利	策划	新媒体	设计	技巧

今天我们继续来讲一下关于微信公众号文章排版时，图片与图片、图片与视频之间如何实现无缝拼接。 上期我们介绍了通过第三方编辑器的现成模板，可以很便捷得实现无缝拼接效果，在日常工作中还是比较推荐直接使用的，毕竟效率高些，需要复习的小伙伴 点这里░░░░░░   。 当然，还有些小伙伴希望能了解一下其实现原理，以及掌握更多解法，今天我们就一起来看看如何通过代码实现无缝拼接排版效果。

01 实现原理

无缝拼接的原理很简单，就是 通过代码，调整两张图片之间的间距，需要的用到的就是 margin-top 这个属性，也就是上边距。通常是将第二张图片的 margin-top 值设置为 -1，从而实现第一张图片与第二张图片无缝衔接。 道理就很简单了嘛，第二张图片上边距都 -1 了，自然跟第一张图片没有间距了。 我们先来看看，直接在微信编辑器中插入两张图片，直观看到的效果和实际网页代码分别是什么。

左侧是直接微信编辑器中直接插入两张图片，右侧是这两张图片插入后用代码后生成的代码。很明显，我们在代码中便没有发现一些多余的属性值，很纯粹，有作用的就是两张图片的地址。 再来看一下实现无缝拼接的两张图片的代码有什么区别。

直观上看，代码量肯定是多了不少，其实这里面很多代码没有实际作用；然后我们需要注意的是，这里面给 每张图片都用了个section包裹起来了，section里面有个属性margin-top的值为-1，这就是上述中我们说过的上边距。 看到这里，无缝拼接的实现原理你应该get到了。

02 如何实现

实现过程只需要三个步骤：首先，复制图片地址；然后，替换代码中的图片地址；最后，将替换完的代码在html模式粘贴到编辑器即可。 步骤其实挺简单的，之前跟着我的教程练习过的小伙伴应该操作起来很轻松；但是，这次我们讲的详细点，比如如何复制图片地址、如何切换html模式等，下次教程有类似内容，就不再详细展开了。   复制图片地址

我们需要在公众号文章内插入的图片地址该如何获取呢？

首先我们需要在公众号素材库中上传需要用到的图片，现在公众号后台改版了，图片素材库在后台左侧的创作管理-多媒体素材-图片素材中；

然后，我们上传完图片后，在素材库中点击改图片，进入图片预览，图片下方有个 查看原图 按钮，我们点击查看原图；

最后，在新打开的原图页面中，浏览器地址栏中的链接，就是我们需要的图片地址，复制即可。

  替换代码

首先准备好无缝拼接的代码，你可以在第三方编辑器中获取，也可以下载我给你准备好的代码，文末有下载方式。

其次，用记事本或者其他代码编辑器打开我们准备好的html代码文件。

然后我们需要找到其中的原本的图片链接，替换为我们之前复制好的图片链接即可。

最后，复制我们修改完的代码。

  粘贴代码

粘贴代码时，需要用到编辑器的html模式，这里有两个方式：

第一种，安装一下浏览器插件，比如壹伴，这样可以直接给公众号编辑器增强很多编辑功能，其中就有html模式；可以直接切换正常的编辑模式和html模式，比较方便。

第二种，前往第三方编辑器中使用html模式，粘贴完代码后再将正常显示的内容复制粘贴回来，这样会多一个步骤。

这里我使用的浏览器插件增强，直接在公众号编辑器上操作。

图片与图片无缝拼接效果就实现了，图片与视频的无缝拼接实现原理是一样的，操作过程中复制视频地址的操作会有些不一样，这些百度也都能找到方法。

本文中讲到的图片无缝拼接以及视频无缝拼接代码，已经整理完毕，公众号内回复【 无缝 】即可下载。

在看·鼓励更多创作