zoukankan      html  css  js  c++  java
  • svg微信公众号推文实现点击显示答案

    svg微信公众号推文实现点击显示答案

    大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js

    但是点击事件可以用svg写  svg代码可不会被微信隐蔽 

    为了能更好的理解 我写个简单的例子 点击变色 

    SMIL方式

    <svg>
    <rect x="15" y="15" width="40" height="40" fill="red">
    <set attributeName="fill" to="blue" begin="click"/>
    </rect>
    </svg>
    

      

     点击显示答案原理就是 答案文字上面有个svg矩形在上面 点击透明度变成0  自然就显示出文字了

    <section style="height: 180px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border- 1px;border-style: solid;border-color: rgb(238, 238, 238);">
    <section class="" style="border- 0px;border-style: none;border-color: initial;box-sizing: border-box;">
    <p style="margin-bottom: 10px;white-space: normal;">
    <br/>
    </p>
    <p style="text-align:center;margin-bottom: 10px;white-space: normal;" align="center">
    <strong style="font-size: 14px;caret-color: red;"><span style="font-size: 18px;"><span style="line-height: 22.4px;">答&nbsp;案</span></span></strong> &nbsp; &nbsp; &nbsp;<br/>
    </p>
    </section>
    </section>
    <center class="" style="box-sizing: border-box;text-align: center;">
    <svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" style="margin-top: -180px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);">
    <rect width="100%" height="200" style="fill: #fefefe;box-sizing: border-box;">
    <animate attributename="opacity" begin="click" dur="6s" style="box-sizing: border-box;" from="1" to="0" fill="freeze"></animate>
    </rect>
    </svg>
    </center>
  • 相关阅读:
    MyBatis 学习记录3 MapperMethod类
    MyBatis 学习记录2 Mapper对象是如何生成的
    MyBatis 学习记录1 一个简单的demo
    hadoop学习记录1 初始hadoop
    Java枚举类的serialVersionUID
    docker学习记录1
    mysql utf8方式连接查看表数据乱码的问题
    在Spring中使用Redis Lua脚本批量删除缓存
    redis 批量删除键
    前后端分离跨域问题解决方案
  • 原文地址:https://www.cnblogs.com/newmiracle/p/12264758.html
Copyright © 2011-2022 走看看