来源 | 般若无界

作者 | 舒欣

效果展示

前两天我收到策划妹子的请求,需要在微信公众号里面做一篇推文。这个推文和以往不同,需要有两张图片无缝拼接,并且下方图片可以滚动的效果。

这个效果目前用微信自带的编辑器是无法实现的,毕竟功能有限,而这个需求也相对要小众一些。不过这个效果是很不错的,在微信推文中浏览会让人耳目一新。


从上图可以看出,首先是一张海报,乍一看没什么,以为就是一张图片。当你用手指滑动屏幕看下面内容时,你会惊奇的发现海报下半部分的内容时是可以滚动的,而且滚动到最底部后海报又回到了最初的状态。是不是很神奇?下面小编我将带你一探究竟!

技术实现原理

之前我们技术部做过一个端午节的推文,和这个类似,只不过那个是上面滚动下面固定,而这个是反过来了。端午节的推文案例效果如下:

我仔细看了下源码,发现原理是类似的。这个技术的关键有两点,一是上下两张图要无缝衔接,而且宽度要相同。

二是图片固定区域滚动,下面的长图不能一开始全部显示出来,而是先显示开头的一部分,这一部分的高度是固定的。

下面的内容初始隐藏,只有通过滚动才会出现下面的内容。滚动到最下方的时候,会发现海报合上了,这里其实是一个障眼法,下方图片的底部正好是和顶部一样的图(只有文字提示不一样),这里对设计有特殊要求,第二种长图的顶部和底部的内容是要保持高度一致的,为了实现这个效果,好的设计是必不可少的。理解了这两个技术点,制作起来就有思路,实现起来就会容易许多。

无缝衔接的实现

无缝衔接的核心技巧在于,使用 HTML 的section标签包裹img标签。要想让图片居中,则需要给section设置左右的 margin 为 auto,宽度为要显示的图片宽度。

在本案例中我设置的宽度是 311.5px,这样即便是在大屏手机上,也能让图片主题能够尽可能占用更大的区域,视觉效果更佳。

需要注意的是,图片的 src 路径需要提前在微信后台编辑器中上传图片,上传成功后点击图片取消勾选后,再右键复制图片链接,粘贴到src位置即可。下面是两张图片无缝衔接的代码示例:

<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径1}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>
<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径2}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>

然而实际效果可能会和我们预想的有所出入,往往会出现两张图片依旧存在白边缝隙的问题,这时候只需要在section标签上加上margin-top:-1px即可。

如果还是有白边,继续手动调节,负值越小,两张图片的上下间距也就越小。

固定区域图片滚动的实现

这里使用的是一个固定的外层盒子,设置overflow-y:auto,同时设置height: 196px;,这样既能保证可视区域固定,也能使得这个区域可以进行滚动操作。

注意这里的 height 需要手动调节,多次在微信编辑器保存发送到手机预览,不断的尝试获得最合适的高度值。浏览器的效果和手机实测会有些许出入,需要耐心慢慢调节。

<section style="margin-top: 0px;">
    <section style="width: 311.5px;margin-right: auto;margin-left: auto;">
        <section style="background-image: url({{图片路径1}});background-size: 100% 100%;">
            <img class="" data-ratio="1.43671875" src="{{图片路径1}}"
                data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 0;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</section>
        <section style="border-width: 0px;border-style: none;overflow-y: auto;height: 196px;font-size: 0px;vertical-align: bottom;box-sizing: border-box;margin-top: 0px;">
            <section style="height: 1086.78px;">
                <img class="" data-ratio="3.025" src="{{图片路径2}}"
                    data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 1;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</section>
        </section>
    </section>
</section>

上面的代码中,图片路径1表示的是上面固定大小海报,图片路径2是可以滚动的长图。

在这个环节我遇到了一个坑,那就是下面长图按照同事之前给的背景图片加图片透明的方案会使得 iPhone 手机可视区域高度变小,导致图片显示的内容不完整,而安卓手机是正常的。

这个 bug 和微信 iOS 版的页面渲染机制有关,刚发现的时候让人摸不着头脑。为了修复这个 bug,我后面采用了设置section标签定高的方法,也就是和实际图片显示高度一致,精确到小数点后两位,这样无论是什么系统的手机都能完美显示了!

section背景图+img透明的方案虽然有 bug,不过有个好处,就是你不用设置section的高度了,同时你可以在审查元素中可以看到section被撑开的高度,以便于获取到合适的section高度采用后面的改进方案。因此我在固定海报的图片上用的还是之前的方案,只是滚动图片不适用而已。

最后一步

看到这里你也许会问,代码我都按照你说的写好了,可是怎么放到微信文章里面去呢?答案其实很简单,这里用到了浏览器 hack 的小技巧。

你在微信编辑器的网页随便输入点内容,然后鼠标右键选择审查元素,审查文本框的内容,把里面的标签全部替换为你写好的代码就可以了!

总结

这个推文做下来最费时间的其实是微调,需要不断保存在手机上调试,而且不同的手机显示可能会不一样。我在制作的过程中做了一些艰难的取舍。

比方说 iPhone5s 上显示效果会比较差,滚动的区域和上方海报有缝隙,这是因为我的宽度设置的是 311.5px,而 iPhone5s 的设备宽度只有 320px,而且微信默认会给文章主体内容加左右内边距,这样就导致实际显示宽度会小于311.5px,那么原来的可视高度就显得不合适了。

如果把宽度设置为100%,这样显示的宽度是最合适的,然而图片是有宽高比的,宽度可以自适应,而可视区域的高度必须是固定的像素值,这样也不合适。

最终我选择的方案是给一个合适的固定宽度,高度根据宽度一点点手动调出来。这样一来只要是目前主流的大屏手机,显示的宽高都是固定的,效果也是一样的。只是宽屏手机左右的白边会多一些,宽度不能占满也是一个缺憾。

掌握了技术原理,实现起来并不十分困难,只是需要在兼容性和效果上做一些平衡,以及需要花费耐心做微调。看完这篇文章,相信你也能够轻松的做出这个推文效果。

关注【般若无界】公众号

了解更多精彩资讯

微信推文无缝滚动是这样炼成的相关推荐

  1. bootstrap上传图片可实现查看上一张图片和下一张图片_如何实现像人民日报微信推文一样的的点亮效果?...

    如何实现向人民日报微信推文一样的的点亮效果? 有两种方法: 方法一:就是使用代码在编辑器进行编辑emmmmmm这个方法贼麻烦,需要调至HTML模式-- 方法二:在现有编辑器模板下利用SVG动画进行编辑 ...

  2. 图片抓取_小小爬虫批量抓取微信推文里的图片

    哈喽,大家好,今天给大家分享一个特别特别小的爬虫案例! 爬取微信推文中的图片!!!! 有人说,这有啥用,,,,万一人家推文是放的是以图片的方式放的某个PPT的内容呢,你想把它弄下来,咋整,就是爬取啦. ...

  3. 英语四级计算机二级的微信推文,简明·实用 | 瞬间高大上的微信公众号推文制作...

    新媒体的盛行,微信逐渐变成了越来越主流的社交工具.微信公众号涉及服务号,企业号与订阅号.优秀的订阅号遍及各个领域,在越来越多人的关注之下成就了财富,荣耀与标杆.那么如何制作优秀的推文?如何制作漂亮的排 ...

  4. 微信推文图片间距有缝的代码_使用记录接缝进行旧代码单元测试

    微信推文图片间距有缝的代码 在大多数情况下,使用遗留代码可能很困难. 但是,当涉及到添加新功能,重构或维护您不熟悉的代码时,它可能会变得势不可挡. 如果您已经使用敏捷技术几年了,并且突然间您面对大量的 ...

  5. 微信推文属性的关联分析 by Apriori算法

    本文通过Apriori算法来对某公司的微信推文属性的关联分析. 本文的目的 找出可让 ['阅读量超过1K'] 的因素,以便达到这些因素使微信推文阅读量提升. 本文的结论 若想让微信推文阅读量超过1K, ...

  6. 爬虫取中间文本_小小爬虫批量抓取微信推文里的图片

    哈喽,大家好,今天给大家分享一个特别特别小的爬虫案例! 爬取微信推文中的图片!!!! 有人说,这有啥用,,,,万一人家推文是放的是以图片的方式放的某个PPT的内容呢,你想把它弄下来,咋整,就是爬取啦. ...

  7. centos7+TP5.1+selenium+chrome抓取搜狗微信推文

    centos7+TP5.1+selenium+chrome抓取搜狗微信推文 一.Composer 引入 "require": {"php-webdriver/webdri ...

  8. 如何优雅的将微信推文自动拷贝成CSDN博文?

    为什么要批量将微信推文转成CSDN博文? 在原来运维了三年的推文公众号TSINGHUAJOKING中, 总共包含了近一千篇原创推文.除了实时性很强的交互推文之外,还有大量的技术相关的推文.今天准备将原 ...

  9. 获取微信推文的实际链接地址(包含JSON数据以及推文msg_data_id)

    前提: 现在随着公众平台的要求越来越多,搜狗微信的爬虫难度越来越高,很多爬虫都没有用了,但是现在很多业务还是要用到历史推文的一些数据,其实很多数据(阅读量.点赞数.封面图片地址.标题.简介)都可以用过 ...

最新文章

  1. 【每日训练】2020/11/9(Splay ?rope大法好!、数论、构造补图)
  2. ViewPager Indicator的使用方法
  3. 带父节点的平衡二叉树_平衡二叉树 通俗易懂
  4. vim 安装_vim实战:插件安装(Vundle,NerdTree)
  5. Java 开源报表制作
  6. 咱也写个小写数字转大写金额 ,纯粹字符串操作实现
  7. 电子工程专业用得最多的17种软件,你哪个用得好?
  8. html代码鼠的故事游戏,分享一个html+js实现打地鼠游戏的实例代码
  9. DeFi 可以从金融危机中学到三件事
  10. creo视图管理器使用方法_5.3 视图管理-样式、截面
  11. 2021年电工(初级)考试题库及电工(初级)模拟考试
  12. 蓝牙Ibeacon室内定位和微信摇一摇周边原理分析
  13. 动态监控zookeeper服务节点变动(附zkUI使用)
  14. 手中的快递包别乱扔了!100万份个人信息被卖40亿
  15. gitlab邮件发不出去解决方法
  16. QNAP-NAS外网访问——aliyun-ddns,docker,myqnapcloud
  17. libgdx 处理加速传感器
  18. linux从光盘中安装php,Linux_Vfloppy通过CD光盘安装Linux到硬盘运行,光盘版的linux系统,可以证我 - phpStudy...
  19. 用Project软件编制项目计划【总结】
  20. @ansible自动化运维详解(总述)

热门文章

  1. 周杰伦:他们只顾嘲讽,却不知眼前是神的降生
  2. 如何修改单元格的宽度html,如何在HTML中设置单元格的宽度和高度?
  3. 使用opencv检测视频人脸
  4. 每日一题 LeetCode909. 蛇梯棋 java题解
  5. 第16章 货币政策与财政政策
  6. 使用flask-avatars处理用户头像
  7. mapbox-gl-draw改造,支持绘制时实时显示面积
  8. 保姆级教程,一文理顺优惠券设计
  9. 浅谈node结合express第三方插件使用跨域
  10. Asis2016 books null off by one