click 点击图片不起作用_在公众号添加"点击显示答案效果"

作为一个即将秃头的程序员,这么实用的功能这么能不去研究一下呢?

进入正题 ???

1.打开微信公众号,新建图文。

①右键 → 检查 

②鼠标点击右边的代码区域,按Crtl+F,随便输入点图文内容,能够找到代码位置就行。

2.插入代码。

①随便找个标签,右键点击Edit as HTML

②在编辑框中加入如下代码......

<section style="height: 230px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border-width: 1px;border-style: solid;border-color: rgb(238, 238, 238);">  <mpchecktext contenteditable="false" id="1603559997900_0.2463386146901354">mpchecktext>  <section style="border-width: 0px;border-style: none;border-color: initial;box-sizing: border-box;">    <mpchecktext contenteditable="false" id="1603559997901_0.7806160681602305">mpchecktext>    <p style="text-align:center;margin-bottom: 10px;white-space: normal;">            <strong style="font-size: 14px;caret-color: red;">        <span style="font-size: 14px;">          <span style="line-height: 22.4px;">                        <p>答案p>            <img border="0" src="https://picsum.photos/100/50">            <mpchecktext contenteditable="false" id="1603559997902_0.2770796707640486">mpchecktext>          span>        span>      strong>    p>    <strong style="font-size: 14px;caret-color: red;">      <mpchecktext contenteditable="false" id="1603559997903_0.5044436455277546">mpchecktext>    strong>  section><strong style="font-size: 14px;caret-color: red;">strong>section><center style="box-sizing: border-box;text-align: center;">  <strong style="font-size: 14px;caret-color: red;">        <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg" style="margin-top: -350px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);">      <rect width="100%" height="250" style="fill: #fefefe;box-sizing: border-box;">        <animate attributeName="opacity" begin="click" dur="1s" style="box-sizing: border-box;" from="1" to="0" fill="freeze">animate>      rect>      <mpchecktext contenteditable="false" id="1603559997904_0.23689150596511355">mpchecktext>    svg>  strong>center>

emmmm.....代码有点小长,里面怎么设置有说明~

3.关于图片

想要使用图片必须使用已经上传到素材库的图片。

获取方式:去素材库中找到需要的图片,右键检查,找到对应的url复制下来,再粘贴到上述代码中的就行了~

4.实现效果

点击空白处查看答案

dd7778c1ca4d13d46d91533a4879e02f.png


CSDN有更详细的介绍~点击原文跳转

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值