微信文章点击图片后显示多张隐藏图片的效果怎么做

 2020-04-30 17:20:31  阅读量: 1045

微信公众号文章点击图片后显示多张隐藏图片的效果怎么做,按照本喵的教程可以快速完成。

效果


先把文章拉到最下面点击花的图片看效果。

登陆键盘喵编辑器,然后再左侧搜索框搜索“10200”或者“显示隐藏“,可以找到这个素材,这个素材的主要效果分为三部分。

1.点击最上方花的图片,慢慢变亮,这个和上期做的“点亮“效果是类似的。

2.点亮之后,下方的图片自动向下滑动。

3.滑动过程中,逐渐显示隐藏的多张图片。

应用场景


许愿、菜单、五一去哪玩、哪里开放了、学习内容、课程介绍、多种多样的应用场景都是不错的。

替换图片素材的方法


素材定义:

黑白顶图:原素材中的黑白花图片

彩色顶图:原素材中的彩色花图片

联系底图:带联系方式向下滑动的图片

隐藏图片:点击滑动后显示的图片(可使用一张或多张)

替换方法:

点击工具栏的第一个按钮“html“,显示出源代码。3c31816573bc00f3b3eace88d13d4484.png

黑白顶图替换位置:找到第30行和第35行,有两处。9956a479be6ee887379db6ef0036718c.png

a5920e31a33bfa43c785341dcd1dcd98.png

彩色顶图替换位置:找到第36行,只有这一处。5131f567ca059d064451c42d8db98e5c.png

联系底图和隐藏图片的替换方法比较简单,再次点击工具栏的第一个“html“按钮,切换回正常的编辑模式,然后点击图片,在弹出的工具栏上点击”换图“就可以进行换图操作了。当然也可以在源代码的43行和32行分别找到。1a581945c7c92ecff3df8ecab79423ea.png

获得图片地址的方法


制作两张尺寸一样的图片,可以用你擅长的图片制作工具,比如PS,如果不会用PS也可以键盘喵微信编辑器可以轻松制作这两张图片。

1.用电脑访问键盘喵编辑器,并登陆。网址是www.jianpanmiao.com

2.点击“多图上传”按钮,上传一张正常的图片。

3. “点击选择本地图片” 按钮然后点击确认。

4.点击上传之后的图片,在弹出的工具栏里面找到“换图“按钮。

5.在弹出的面板上点击“插入图片“,找到”地址“那行,记住这个地址,比如复制这个地址到文本里面。

6.关闭这个对话框,再次点击上传的图片,然后点击弹出的工具栏上的“美图“按钮。

7.点击“黑白画映“,然后点击确定,一张黑白图片就诞生了。

8.按照步骤4中的办法复制这个黑白图片的地址到文本里面。

你现在拥有两张图片的地址了。

注意事项:

1.图片的尺寸最好在900左右,太大了没用。

2.图片的文件大小最好控制在100-200K,否则粉丝去访问文章的时候加载慢,而且复制到公众号后台的时候容易复制不完全。

3.如果图片不见了,可以点击左侧的“我的图片“,点击图片就可以出现在编辑区,按照上文中的方法找到地址。

更详细教程可以看前一篇的点亮教程。

https://www.jianpanmiao.com/index/method/info/id/148.html



更改图片尺寸


尽量使用原图片素材的尺寸,否则可能出现需要去源代码调整图片间距离数值的可能。

原素材图片尺寸:

黑白顶图:640*853

彩色顶图:640*853

联系底图:900*500

隐藏图片:1080*1600(三张)

如果使用了自己尺寸的图片,你需要自行去调整间距数值。

图片间距设置的代码位置:

顶图和隐藏图片间距设置在第30行 ,修改460的数字到合适的大小就可以了。ca554bab59f6b0f9afef2ff057b5d2ef.png

顶图和联系底图间距设置的在36行和37行两处,修改430的数字到合适的大小就可以了。b5c1a535a63024316c7e755463db5131.png

图片完全显示后的整个素材的尺寸调整在36行和37行,把其中的2000(有三处)改成合适的大小就可以了。c7abac10a409f682d9f38db0ab094d38.png

添加或减少隐藏图片数量


在第32行,以<img开头以/>为结尾的段,共三段,复制其中一段,然后粘贴几个就是多加几个图片。删除几个就少几个图片。73916dfe76ec2452359e66046ad76395.png

调整顶图变色时间


在第38行,dur="2s"这里的2可以改成任意数字。094bfd8151adebbc8e72b4bfd5065d3f.png

调整图片点击后多久下滑


在第37行,可以把其中begin="click+2"数字2可以改成任意数字47ecc45f59eadc2280cabf586ec9e1ba.png

在素材前面加入其他内容


点击素材,然后在弹出的工具栏上点击“前空行“就可以了。

c384b51946aca140d009f21e249b3807.png

注意事项


1.图片不要太大,100-200K单张为宜。

2.图片不要太多。

3.点击复制全文复制到公众号后台就可以了,记得开flash插件。

4.火狐和IE浏览器不兼容,使用其他常用浏览器即可。

5.mac电脑这个效果通过复制全文是不能实现的,换操作系统或使用同步功能才可以。

6.图片底色最好接近,否则各种分辨率会有微小的不同,底色接近容错率高。

7.联系底图的二维码可以被正常试别。

8.使用“手机预览“和”PC预览“多看看效果,图片有间距很正常,多调试即可。

9.初始状态联系底图不能完全盖住隐藏的图片,这个是正常的,否则别人也看不到有隐藏的图了,你可以通过自己图片的制作技巧改变。

10.这个素材后面不能使用内容,想加文字或图片得话在这个素材前面加。

11.图片可以使用gif图。

效果:

点击花变色,然后图片自动下滑,出现隐藏的多张图片,可以使用手机预览自行查看。

教程:

请详细阅读本文



·





扫码获得帮助