微信公众号 SVG长按互动
<section class=""
style="display: block;width: 100%;height:667px;overflow:hidden;margin-top: -1px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;
background-image: url('http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.gif');
-webkit-tap-highlight-color: transparent;user-select: none;">
<svg enable-background="new 0 0 750 1334" space="preserve"
style="display: block;width: 100%;height:667px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;
background-image: url('http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.jpg');
-webkit-tap-highlight-color: transparent;"
version="1.1" viewBox="0 0 750 1334" x="0px" xlink="http://www.w3.org/1999/xlink" xml=""
xmlns="http://www.w3.org/2000/svg" y="0px">
<animate attributeName="opacity" values="1;1;0" begin="touchstart" end="touchend" dur="1.5s"
keyTimes="0;.3;1" fill="freeze" restart="whenNotActive"></animate>
<animate attributeName="opacity" begin="touchend" to="1" dur="1.5s" fill="freeze" restart="whenNotActive"></animate>
</svg>
</section>
把代码复制到135编辑器可以手机扫描生成的预览二维码码查看实际效果。
P.S. 预览二维码要内容里有文字才能生成,单纯放svg标签而没有文字内容,135编辑器是生成不了预览二维码的,如果生成不了码,就在上面随便打几个字在试试
参考链接:
详细教你微信公众号正文页SVG交互开发
微信公众号 SVG长按互动的更多相关文章
- 微信公众号开发C#系列-10、长链接转短链接
1.概述 短网址的好处众多,便于记忆,占用字符少等,现在市面上出现了众多的将长网址转变为短网址的方法,但是由于他们都是小的公司在幕后运营,所以很不靠谱,面对随时关闭服务的可能,这样也导致我们将转换好了 ...
- 使用 Chrome 对长网页(知乎、微信公众号文章)进行完整截图
当需要对一个较长的网页进行完整截图时,可以直接使用谷歌浏览器(Chrome)自带的截图功能完成,不需要依赖第三方截图软件. 1. 打开网页 以微信公众号的页面作为示例:https://mp.weixi ...
- svg微信公众号推文实现点击显示答案
svg微信公众号推文实现点击显示答案 大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js 但是点击事件可以用svg写 svg代码可不会隐蔽 下面我直接贴代码 < ...
- 微信公众号开发之access_token的全局共用
最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...
- 微信公众号发送客服消息提示errcode":45015,"errmsg":"response out of time limit or subscription is canceled hint:解决办法【已解决】
微信公众号发送客服消息提示errcode":45015,"errmsg":"response out of time limit or subscription ...
- 用java开发微信公众号:公众号接入和access_token管理(二)
本文为原创,原始地址为http://www.cnblogs.com/fengzheng/p/5027630.html 上一篇说了微信开发的准备工作,准备工作完成之后,就要开始步入正题了.其实微信公众号 ...
- C#开发微信门户及应用(37)--微信公众号标签管理功能
微信公众号,仿照企业号的思路,增加了标签管理的功能,对关注的粉丝可以设置标签管理,实现更加方便的分组管理功能.开发者可以使用用户标签管理的相关接口,实现对公众号的标签进行创建.查询.修改.删除等操作, ...
- 皮裤原理和运营微信公众号dotNET跨平台
经常碰到有同学对.NET跨平台存在各种疑惑和误解,原因是什么呢?当然我是知道.NET的跨平台不是问题,而且微软2014年的努力可圈可点,而且还有很多人对.NET的前景感到困惑.春节期间突然明白了,这就 ...
- 【原创】【2015最新】微信公众平台开发手把手入门之一:缘起微信公众号(PHP,MYSQL, BAE)
最近因为业务的需要,老板布置做了两个月简单的的微信公众平台开发,从网上搜了一些资料,实话说资料不多. 在参考学习的过程中也遇到了不少难缠的小问题,虽然不难逾越,但是确实浪费了时间. 我发现网上仅有不多 ...
随机推荐
- Redhat 7.0 安装桌面环境
1.安装桌面环境组件 #yum groupinstall "Server with GUI" 2.切换到图形界面 #startx 3.设置启动模式为图形界面 #rm /etc/sy ...
- man命令的使用方法
转载自:http://www.cnblogs.com/hnrainll/archive/2011/09/06/2168604.html Linux man命令的使用方法 Linux提供了丰富的帮助手册 ...
- postgresql-创建主键自增的表
之前一直用的mysql,这个也基本上是主流,主键自增是很多建表规范中的硬性要求,不过这两种数据库主键自增的区别还是很大的 通常navicat中对mysql 主键自增直接客户端指定即可,不过对PG貌似不 ...
- 3.1_springboot2.x检索之elasticsearch安装&快速入门
1.elasticsearch简介&安装 1.1.1.elasticsearch介绍 我们的应用经常需要添加检索功能,开源的 ElasticSearch 是目前全文搜索引擎的首选.他可以快 ...
- 2.1_springboot2.x消息介绍&RabbitMQ运行机制
1.概述 1.大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2.消息服务中两个重要概念: 消息代理(message broker)即消息服务器 和目的地(destination ...
- POJ 1946 Cow Cycling
Cow Cycling Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 2516 Accepted: 1396 Descr ...
- jsonArray转换成List
从字符串String转换成List 字符串格式: String jsonstr = "{'studentsjson':[{'student':'张三'},{'student':'李四'}] ...
- iOS开发系列-Charles
概述 Charles相当于一个插在服务器和客户端之间的"过滤器".当客户端向服务器发起请求的时候,先到charles进行过滤,然后charles在把最终的数据发送给服务器: 注意: ...
- 关于soapui如何做安全测试
1.首先安装soapui5.1.2 第一步:运行SoapUI-Pro-x32-5.1.2_576024.exe文件,按照步骤安装成功: 第二步:拷贝Protection-4.6.jar到soapui安 ...
- 十一. for of
const fruits = ['Apple','Banana','Orange','Mango']; es5: 可读性差 for(let i=0; i < fruits.length; i + ...