设置微信公众号的文章要点击一次才显示出来

今天公司同事看到一个微信公众号的文章特别有趣。有趣的东西是文章内容需要人工点击才会显示出来。

于是,研究就开始了。经过一个多小时的大脑组织html、css、js代码。终于把代码弄出来了。

下面就贴上代码:
这里是点击一次才会显示内容文字的代码

<section label="Copyright © 2017 playhudong All Rights Reserved." style="
border:none;
border-style:none;
margin:0rem auto;" id="shifu_flo_001" donone="shifuMouseDownPayStyle(&#39;shifu_flo_001&#39;)">
<section style="
overflow:hidden;">
<section style="width:100%;
text-align: left;
padding: 0rem 1rem;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5;
height:auto;
overflow:hidden;
color: #000;">
<p style="margin:0">
//这里是文字点击一下才会显示的内容
</p>
</section>
<svg style="width:100%;
height:40rem;
margin-top:-40rem;
" data-ipaiban-svg="style中的height、margin-top和rect标签中的height的高度保持一致">
<rect style="width:100%;
height:40rem;
fill: #fff;">
<animate attributename="opacity" begin="click" data-ipaiban-begin="begin可以写0s(秒数)或者click(点击触发)" dur="3s" data-ipaiban-dur="dur写几秒,动画就持续执行几秒" from="1" data-ipaiban-from="from写0~1,透明度就是从几开始" to="0" data-ipaiban-to="to写0~1,0为完全透明" fill="freeze" data-ipaiban-fill="fill指是否还原初始状态,freeze为不恢复"></animate>
</rect>
</svg>
</section>
</section>
<p class="shifubrush">
<br/>
</p>

 

这里是点击一次才会显示图片的代码:

<section label="Copyright © 2017 playhudong All Rights Reserved." style="
border:none;
border-style:none;
margin:0rem auto;" id="shifu_flo_005" donone="shifuMouseDownPayStyle(&#39;shifu_flo_005&#39;)">
<section style="
overflow:hidden;">
<section style="width:100%;
text-align: left;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5;
height:auto;
overflow:hidden;
color: #000;">
<img src="http://cwhello.com/wp-content/themes/wpdx/images/pic/4-330x200.jpg" data-ipaiban-src="此处把需要替换的图片地址粘贴过来放入scr的引号中间" style="width:100%;"/>
</section>
<svg width="100%" style="width:100%;
height:25rem;
margin-top:-25rem" data-ipaiban-svg="style中的height、margin-top和rect标签中的height的高度保持一致">
<rect style="width:100%;
height:25rem;
fill: #fff;">
<animate attributename="opacity" begin="click" data-ipaiban-begin="begin可以写0s(秒数)或者click(点击触发)" dur="3s" data-ipaiban-dur="dur写几秒,动画就持续执行几秒" from="1" data-ipaiban-from="from写0~1,透明度就是从几开始" to="0" data-ipaiban-to="to写0~1,0为完全透明" fill="freeze" data-ipaiban-fill="fill指是否还原初始状态,freeze为不恢复"></animate>
</rect>
</svg>
</section>
</section>
<p class="shifubrush">
<br/>
</p>

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/2346.html

(1)
上一篇 2017年7月24日 00:00
下一篇 2017年7月26日 00:00

相关推荐

  • 借助公众号拦截,通过小程序实现自动化赚钱,月入几万元

    一直研究公众号拦截优化排名,可以说越深入研究,越感觉很多人通过公众号拦截闷声赚钱,很多时候我们看到只是表面,很多人说公众号不赚钱,现在公众号没有机会,其实很多时候都是我们不理解,我们的无知 当时看到这...

    2020年12月24日
    0181
  • 拆解私域裂变传播做公众号涨粉详细步骤。

    想通过裂变传播做公众号涨粉,简单点说就是用户将海报或者文章转发至朋友圈,让更多人看到以及关注。我认为裂变传播分可以分为主动分享和海报裂变。这篇文章就分为3个部分来说,一是主动分享、二是海报裂变、三是裂...

    2021年8月30日
    0140
  • 公众号涨粉复盘:3个月涨粉5000是怎么做的?(三)

     4.万粉后的涨粉规划              万粉后的涨粉规划,坚持「公域引流」 「私域引流」协同作战,两条腿一起走。              ①公域引流:              知乎、小红书、抖音、头条视频、B站等自媒体平台            ...

    2021年8月17日
    0142
  • 微信公众号加粉的17种有效方法(10天引流10万+精准粉丝)

    很多人问我最近怎么不更新博客了?因为最近在升级公司的小程序,因为之前框架的原因,所以重新升级了个主流的系统。改框架远比要重新开发比较复杂,所以日干夜干。实属有点忙不过来。不过现在小程序更新也接近尾声了...

    2021年6月25日
    01.1K
  • 2016公众号快速涨粉方法汇总

    有流量的地方就有营销,网络推广营销就是去流量大的地方截流,这是永恒不变的,包括现在的自媒体也是在通过自己构建媒体来截流。有流量的地方就有营销,推广营销手段无处不在,只要你留心观察。 首先就是去挖掘你的...

    2016年8月16日
    0151
  • 利用微信公众号热门关键词截流,让你轻松获取流量。

    这里给大家深度分享我如何三天如何通过公众号热门关键词引流五千精准粉丝的全套流程,希望这套方法可以真正的为你所用,让你也可以快速的通过这套模式打造自己的粉丝,最近咨询我的人实在太多,一些最基本的东西这篇...

    2020年10月3日
    0342
  • 获取微信公众号一键关注链接的小技巧

    方法不难,但是非常实用,我就长话短说。 如下就是微信公众号一键关注链接页面: 这个页面和我们一般看到的公众号关注页面不一样,包含了logo、介绍,还有历史消息,是一个更加完整的公众号介绍页面,能够大大提高用...

    2016年8月16日
    0179
  • 公众号涨粉技巧:3个月涨粉5000是怎么做的?(二)

      3.发展阶段2000-10000粉              积累了2000的基本粉丝后,就可以开始快速增长了。              ①打法:互推 众筹投放,循环使用,粉丝数螺旋式上升。              在这个过程中,公众号要保持更文。发互推...

    2021年8月17日
    0208