木疙瘩每日分享吧
2019年10月28日 星期一
——————————————
H5热力榜
 
人民日报-民族Style
热力值 ★★★★★
http://rrd.me/eMUMv 

长城新媒体-礼赞中国 看燕赵大地巨变
热力值 ★★★★
http://rrd.me/eMVp6 

湖北日报-迎军运，换新装
热力值 ★★★☆
http://rrd.me/eMVtM 

【每日一答】
Q：木疙瘩时间轴上的“洋葱皮”是做什么？有什么用呢？
A：刻帧用的，常用在调节动画的细节，打开洋葱皮后，会同时展示左右几帧画面。



  收起阅读 »

碰撞检测就是检测两个物体边缘是不是有重叠，此例以方形为例，圆形物体暂时不考虑。
 
假设舞台上有aa和bb两个物体，以下四种情况需要同时满足，才能判断重叠。
 
1. aa左值 加 aa的宽 大于 bb的左值


 
{{aa.left}}+{{aa.width}}>{{bb.left}}
 
2. bb左值 加 bb的宽 大于 aa的左值


 
{{bb.left}}+{{bb.width}}>{{aa.left}} 
 
3. aa的上值 加 aa的高 大于 bb的上值


 
{{aa.top}}+{{aa.height}}>{{bb.top}}
 
4. bb的上值 加 bb的高 大于 aa 的上值


 
{{bb.top}}+{{bb.height}} > {{aa.top}}
 
四个行为同时成立就是
 
{{aa.left}}+{{aa.width}}>{{bb.left}} && {{bb.left}}+{{bb.width}}>{{aa.left}} && {{aa.top}}+{{aa.height}}>{{bb.top}} && {{bb.top}}+{{bb.height}} > {{aa.top}}
 
 
可以打开作品看效果或者另存
 
https://www.mugeda.com/animation/edit/9d204fda 收起阅读 »

安卓系统实测可以，ios系统未测试。
查看地址




源码地址：https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口，把你要禁止长按保存的图片命名，微信号替换为你命名的图片名字。
 

mugeda.addEventListener("renderready", function(){
     var scene = mugeda.scene;

     scene.getObjectByName('微信号').dom.style.cssText += "pointer-events:none";

});
  收起阅读 »

2019年10月1日，是新中国成立70周年的伟大时刻。随着“我和我的祖国一刻也不能分割......”的优美而又振奋的旋律在耳边萦绕，我们感慨：祖国给了我们无数的力量和感动！中国，是我们听见了就会肃然起敬的字眼。
值此之际，各大媒体精心策划了众多H5交互融媒新闻报道作品，让我们在移动端更加生动、立体、直观、有趣地见证到新中国70周年的成长与富强。
 
不得不说各大媒体紧紧抓住了融媒内容生产的特点。即H5支持融合文字、图片、视频、动画、交互等多种内容形式，好上手、成本低、传播迅速的优势，大批量上线了不同类型的H5，不管是质还是量都超乎想象。

为此，小编为大家整理了新中国70周年的H5新闻报道案例合辑，让我们来看看各大媒体为新中国成立70周年献礼的优秀H5作品有哪些呢？

一、AI与H5技术的深度融合
越来越多的H5作品与AI技术相结合，比如语音识别、图像识别、文字识别等，提升用户体验感。以下H5作品都以换脸为主要交互方式，实现人脸与56个民族服饰、以及祖国大好河山的融合，能够将用户上传的照片与特定的形象进行脸部融合，生成的图片效果既有用户的五官特点，又自带美颜滤镜效果，同时抓住用户认同感以及炫耀心理，让作品迅速传播。


作品：爱国Style
出品：人民日报客户端
http://ih5.peopleapp.com/c/rcha/2z4y/index.html



作品：国庆节到了，你出门旅游了吗？
出品：人民日报中央厨房
https://8.u.mgd5.com/c/r3gl/ss22/index.html 


作品：光荣的红领巾
出品：未来网
https://f.u.mgd5.com/c/ehgg/tuaw/index.html


二、各种创意H5作品层出不穷
从用户心理角度出发，通过让人眼前一亮的创意、出乎意料的结果，或时事新闻事件，从好奇心理、挑战心理甚至指定用户感兴趣的点出发，每个场景或交互点都要精心策划、提供不同的信息，不断吸引用户看完，在H5结束界面引出自己的品牌类H5。

1、创意交互
作品：识得呢10个字，你就知道广东有几劲
出品：南方财经全媒体集团
https://2.u.mgd5.com/c/simn/0-o5/index.html



2、交互视频
作品：百米长卷绘重庆
出品：重庆日报
https://3.u.mgd5.com/c/tcut/xbpb/index.html



3、密室探索
作品：穿过时光机器  搜寻你的独家记忆
出品：新湖南
http://h5.hunantoday.cn/c/uj_g/aekw/index.html



4、答题测试
手绘答题测试+舞台截图
作品：国庆大家都在干这事，你呢？
出品：湖北日报
https://b.u.mgd5.com/c/0pfb/u4wx/index.html



5、游戏类
选场景，生成图片+舞台截图
作品：国庆节，我为祖国送祝福
出品：上游新闻
http://3.u.mgd5.com/c/m-oa/cuy3/index.html
 


三、交互长页面动画应用广泛
本次H5新闻报道的长图类H5形式占多半，一个是这种技术实现起来简单、易出效果，交互体验好，只要故事叙述得清晰、画面色调把握的好极容易产出优秀作品。
另一个是用长卷表现手法做叙述类H5，让新闻故事的描述更具有历史感。正好与70周年的发展和变化相契合。

作品：H5|致敬共和国英雄！习近平铸就“中国信仰”
出品：央视新闻
https://b.u.mgd5.com/c/s_uz/aavv/index.html



作品：央企与共和国共成长
出品：国务院国资委&中国日报网
https://4.u.mgd5.com/c/iur3/9aai/index.html



作品：70年，一户人家的光影故事
出品：求是网
http://h5.qstheory.cn/c/e0df/bwn9/index.html



作品： “数看”福建70年之变
出品：人民网福建频道
https://8.u.mgd5.com/c/zrz9/5h8m/index.html



作品：我在幸福长街70号等你
出品：红网
https://h5.rednet.cn/c/kwbk/dmfw/index.html






四、专题类（用H5作为专题导航，内嵌各种形式的70周年报道）
南方财经全媒体集团用H5替代传统网页作为一个新闻专题的导航页面，画面和动态效果更加美观、交互和表现形式更加多样，并具有实时更新的优势。另外可实时获取H5导航的浏览数据、获取用户提交数据并用木疙瘩内容分析查看用户的高级浏览行为数据，从而更好的监控作品传播效果，通过行为数据更科学地分析用户关心浏览的“点”从而改进H5新闻的作品及传播效果。

作品：表白祖国！一起感受70年的沧桑巨变—21世纪经济报道倾情致敬
出品：南方财经全媒体集团
https://2.u.mgd5.com/c/simn/vltu/index.html



山东广播电视台融媒体资讯中心、长城新媒体集团等媒体抓住H5的适配性高、应用面广、传播速度快等特点，已将H5新闻报道归为日常的报道形式，即专题系列化报道。再加上全新的创意以及嫁接新闻报道的特点，极大的提高了新闻舆论的传播和影响力。针对民生热点以及社会焦点，让原有传统纸媒的信息传播形式通过移动端“飞入寻常百姓家”。

作品：闪电视界｜宁津：壮丽70年 丰收颂祖国
出品：闪电视界
http://3.u.h5mc.com/c/wtmp/zpxe/index.html


作品：祖国，我想对你说
出品：闪电新闻
http://h5.iqilu.com/c/ofxv/cgvi/index.html


作品：骆宗明：388本家庭账簿忆变迁
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html


作品：闫青海：“开游船”的老党员
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html



作品：王景堂：七旬老人手绘“中国梦”
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html



五、对比类新闻的创新
对比类新闻最常见的是新旧物件对比、事件前后场景对比。这类H5技术实现可以使用木疙瘩的擦玻璃工具，以及坐标关联等功能实现，并将声音、动画、视频等信息载体与对比物体进一步连接，以创新的方式通过现知的内容去了解对比以往的内容，从对比交互的体验入手形成事件对比的H5新闻报道。

作品：老物件VS新玩意，超时空同框 带你穿越70年
出品：上游新闻
https://0.u.mgd5.com/c/d6pq/rhdg/index.html



作品：70年前TA们登上湖北日报创刊号，70年后……
出品：湖北日报
https://a.u.mgd5.com/c/0pfb/4cg0/index.html



那么，大家想策划制作一支经典刷屏级的H5新闻时，除了从用户心理、交互体验出发外，平时还需要多看、多积累一些经典的H5新闻案例来提高自己的H5策划制作水平。为了帮助大家策划出更好的H5新闻作品，小编汇总了各大媒体的H5新闻案例，扫描下方二维码获取：

收起阅读 »

木疙瘩每日分享吧
2019年10月16日 星期三
——————————————

【元件动画源文件共享】
大气金星飘落效果
预览地址：
http://rrd.me/epJUY
打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/50ac0386


【每日一答】
Q：进度条与定时器关联，卡顿如何解决啊？
A：把定时器的精度调整为毫秒即可。



——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年10月17日 星期四
——————————————
【模版推荐】
城市名片
http://rrd.me/eFrMt
垃圾分类小能手
http://rrd.me/eFrQr
代表委员的行李箱
http://rrd.me/eFrRh

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可

【每日一答】
Q：我该怎么禁止翻页？
A：在舞台上添加一个物体，在物体上添加禁止翻页的行为就可。
——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年10月18日 星期五
——————————————

【教程推荐】
2分钟就搞定的擦玻璃功能
http://m.mugeda.com/lesson/5c2 ... 7fa53


【每日一答】
Q：擦一擦图片显示下面的图片是怎么做的？
A：在舞台左侧上添加擦玻璃控件，在右侧属性栏中添加前景图片和背景图片即可。

——————————————


本期编辑：木盆 收起阅读 »

亲爱的木友们：
上个月开始木疙瘩向木友们广泛征集新功能及改进意见，收到了大家的热情回应，为我们提出了很多中肯的建议、新鲜的想法，小木表示深深的感谢！
 
木疙瘩对所有建议进行梳理，并拿出几个内部备选功能让广大木友们投票，从票选结果得出前5个待开发的功能为：

• 视频工具 （控制视频跳转到指定时间并播放）
• 全新的截图工具 （区域截图、截图精度设置、对任意物体进行截图）
• 虚拟现实向前走动效果
• 增加全景视频功能（在虚拟现实中控制全景视频）
• 行为优化（可在时间轴的帧上直接添加行为，无需建立物体）

 
技术大大拿到票选结果纷纷表示很兴奋，马上对这些功能进行需求和开发周期的评估，准备大干一场啦！
 
综合票选结果和开发周期，10月份2个功能已经安排上啦！
 
下面小木公布初步的开发排期：
 
10月底上线功能有：

• 视频工具 （控制视频跳转到指定时间并播放）    【教程】视频的跳转并播放功能（精确到秒）
• 增加全景视频功能（在虚拟现实中控制全景视频）    【教程】VR全景视频

 
以上两个功能上线后，会马不停蹄的开发其余3项功能！
 
开发排期出来后，小木会第一时间告诉大家哦，在此感谢广大木友的支持！
 
 
 
 
  收起阅读 »

木疙瘩每日分享吧
2019年10月15日 星期二
——————————————

【模版推荐】
开启宜昌时光滤镜
http://rrd.me/eEjzv
记者招待会
http://rrd.me/eEj6k
xxx大事记
http://rrd.me/eEj7W

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可

【每日一答】
Q：分享到朋友圈后，除了自己以外其他人都看不见怎么办？
A：将第一个个字母换成数字即可，例如https://f.u.mgd5.com/c....换成https://1.u.mgd5.com/c....

——————————————

本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年10月14日 星期一
——————————————

【案例分享】
郑州生活志
http://rrd.me/eDzjX
读懂这6大基因，你就读懂了梅溪湖
http://rrd.me/eDzfW
传承老字号 奋斗新时代
http://rrd.me/eDzma

【每日一答】
Q：怎么给物体同时做旋转和平移动画？
A：在时间轴上给物体添加关键帧动画，在下一关键帧修改位置和旋转属性。


——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年10月12日 星期六
——————————————

【教程推荐】
一次就能学会的接力型H5
http://medu.mugeda.com/lesson/ ... e943c


【每日一答】
Q：体量小的H5作品是怎么做的
A：在作品制作完毕后，导出HTML包到Tinypng进行压缩，利用资源管理区替换大图片。

——————————————


本期编辑：木盆 收起阅读 »

查看地址：https://7.u.mgd5.com/c/_-my/pzye/index.html​

 

1. 查看地址
2. 模板地址
3. 

  收起阅读 »

查看地址

内容分析查看作品的高级浏览行为数据，帮助您更好的监控作品传播效果,包含但不限于以下信息：

打开成功率
成功进入到作品页面的次数比例，成功率越高效果越好。
 
加载时间分布
用户打开作品所需的时长分布，应该保证大部分用户的打开时间在8s以内。
 
页面到达率
作品各个页面的次数比例。后翻页面的到达率越高，说明浏览用户越感兴趣，反应作品更吸引用户。
 
每页停留时间
用户阅读本页的时间分布。如用户阅读时间过长，可适当的调整页面内容，以提高用户的阅读体验。
 
页面行为统计
页面上的点击等事件行为的行为统计和比例。
 
位置分布
用户的地理位置分布，以省为单位。
 
生成报告
下载详细的统计数据报告pdf文件。
 
单作品内容分析服务：50元/个作品
全部作品内容分析服务：500元/年/账号
 

————————————————————
那么该如何找到这项服务呢？？
 
1、打开作品的数据统计页
进入我的作品
 https://www.mugeda.com/anilist.php
 
找到一个已发布作品，选择“查看数据”按钮，进入该作品的数据统计页面：

 
2、打开内容分析页
这里就是内容分析服务介绍页了，您可以下载一个内容分析的统计报表预览一下效果哟～

点击“立即购买”按钮，成功购买后，就可以打开该作品的内容分析功能，查看详细的内容分析报告了～
  收起阅读 »

木疙瘩每日分享吧
2019年10月10日 星期四
——————————————
【模版推荐】
打字机游戏-获得你的关键词
http://rrd.me/e9SFg
记者招待会
http://rrd.me/e9SHy
时代记忆测试
http://rrd.me/e9SJx

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可 

【每日一答】
Q：如何快速制作单选题？
A：在左侧菜单栏的表单中点击单选题控件即可。

——————————————


本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年10月9日 星期三
——————————————

【元件动画源文件共享】
常用红旗飘舞动画
预览地址：http://rrd.me/e8PK8

打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/0e143471

【每日一答】
Q：为什么图片上传到木疙瘩上就不清楚？
A：在设计过程中，原始设计尺寸是舞台的二倍。默认舞台尺寸为320*520px，设计尺寸为640*1040px。

——————————————

本期编辑：木盆
  收起阅读 »

木疙瘩每日分享吧
2019年10月8日 星期二
——————————————

【模版推荐】
人民日报：大侠，请重新来过！
http://rrd.me/e7WmK
红网：代表委员的行李箱
http://rrd.me/e7WgU
上车助力扶贫
http://rrd.me/e7Wvj

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可

【每日一答】
Q：如何利用文本框制作更小的文字
A：首先把文本框打组，在进行缩放即可。


——————————————

本期编辑：木盆 收起阅读 »

马上投票>>>
 
木疙瘩在国庆前夕在微信公众号和论坛两个渠道征集新功能需求，木木在国庆期间看完所有反馈之后，我惊叹于各位木友们的脑洞，到底大家最需要哪些新功能呢？如：全新的截图工具、视频⼯具、敏感词过滤设置、复制功能优化、全景视频功能……

还有很多有意义的需求建议，在这里就不一一列举了，你们提交的每一个字，我们团队都会认真研读，只为做出你们更喜爱的产品。笔❤

成功进入候选环节的同学们，每人赠送一个月木疙瘩会员。那么，在这次活动中有哪些小伙伴中奖了呢？


将于2019年10月14日陆续为以上获奖者开通标准会员服务哦～

根据功能热度、产品发展策略、技术开发周期几个维度选出候选功能进行投票，选票前5条直接加入开发计划，并在官网公开开发排期。开发最快的功能，预计10月底就能跟大家见面了！

投票时间：2019.10.08 - 2019.10.11（本周五）

最终的投票结果、开发排期会在木疙瘩论坛首页公布，请各位木友届时关注。

在微信中为你最想要的功能投上宝贵的一票吧。

马上投票>>>
  收起阅读 »

demo地址

木疙瘩制作如需源码请留言

• 
• demo地址
• 共享源码地址
• 有问题请联系

收起阅读 »

放假时间：2019.10.1～10.7
人工客服：上午10:00-12:00   下午14:00-16:00（仅限付费会员）
作品审核：8小时内
QQ群/微信群：无值班


相关问题：
——作品审核——
建议不要反复修改重新发布，会影响您的项目上线，造成不必要的麻烦。如急需上线可购买会员，发布后直接查看并使用。
 
——付费会员人工客服——
登录后网页右侧橙色图标 - 人工客服
 
——智能机器人——
登录后网页右侧橙色图标 - 智能客服
 
——QQ 交流群——
（不属于客服服务，用于用户间技术交流）

教师交流群：475633109
企业交流群：562256909
新媒体交流群：338214678
学生交流群：413632245
独立设计师群：662106426
 
——查看教程——
图文百科全书：http://bbs.mugeda.com/?/feature/zhishi
官方视频教程：http://edu.mugeda.com/lesson.p ... 55f01
最新案例教程：https://ke.qq.com/course/list/Mugeda?tuin=6386c66
 
 
——申请推荐企业/设计师——
http://bbs.mugeda.com/?/article/583 

——申请发票——
http://bbs.mugeda.com/?/article/271
  收起阅读 »

木疙瘩每日分享吧
2019年9月29日 星期日
——————————————

【案例分享】 
人民日报：爱国style
http://rrd.me/ezDms
解放日报：方寸之大
http://rrd.me/ezDqe
知乎：假如新中国成立以来有热榜
http://rrd.me/ezD3R

【每日一答】
Q：如何实现倒计时功能
A：可以利用时间戳制作倒计时
预览链接：http://rrd.me/ezDLt
详细教程：http://rrd.me/ezEeQ

——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年9月27日 星期五
——————————————

【教程推荐】
刷屏3亿人的国旗H5，0基础学会做
http://bbs.mugeda.com/article/887


【每日一答】
Q：如何原位复制？
A：ctrl+shift+v 即可。

——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年9月26日 星期四
——————————————
【模版推荐】
微信头像合成区域截屏功能
http://rrd.me/exwcX
打字机游戏-获得你的关键词
http://rrd.me/exwgH
建国以来的那些关键词
http://rrd.me/exwtm

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可

【每日一答】
Q：每个页面的背景图都不一样应该怎么做？
A：在每页的舞台最下面的一个图层放置一张背景图即可。

——————————————
教程 | 刷屏3亿人的国旗H5，0基础学会做
详细教程:http://rrd.me/exyjm

木疙瘩新功能由你！来！定！
http://rrd.me/exyuJ

——————————————
本期编辑：木盆 收起阅读 »

木疙瘩每日分享吧
2019年9月25日 星期三
——————————————

【元件动画源文件共享】
童話里的世界-棉花糖般的云彩
预览地址：
http://rrd.me/ewWMA
打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/649eb575

【每日一答】
Q：如何压缩作品大小
A：首先导出HTML动画包，将动画包解压后打开image文件夹，进入www.tinypng.com进行压缩，压缩过后利用资源管理器进行替换。

——————————————
本期编辑：木盆 收起阅读 »

昨天@微信官方给我一面小红旗
你是不是也发了
然后...

每隔几分钟就看一次自己的微信头像

第一眼没有国旗
几分钟后...
没有国旗

你认真的样子真可爱

马上国庆70周年了，小国旗必须有

下面我给大家安利一波
刷屏3亿人的国旗H5如何制作！

我选用木疙瘩平台为制作工具，那就开始讲解啦～～
效果预览：https://9.u.mgd5.com/c/tbmg/2yc2/index.html

>>>结构分析<<<
舞台共有3帧，画面及功能如下图：


玩法介绍：
自动获取微信头像（或上传本地照片），选择边框样式，生成头像。长按保存即可～

<玩法流程>

技术思路：
利用木疙瘩“获取微信头像”、“定制图片”功能获取到头像原图，制作逐帧元件用来选择边框，调用木疙瘩区域截图接口制作完成。

<关键功能点>
电脑端打开共享编辑地址：https://cn.mugeda.com/animation/edit/1e4de26a
注：如果你是木疙瘩新用户，请先注册然后 [文件 ] - [ 另存为 ]，即可把此案例Demo保存到自己账号中。

一、制作头像元件（很关键）
首先打开木疙瘩官网（cn.mugeda.com）,创建一个新作品，选择专业版编辑器。


1、创建元件
导入边框图片到舞台，调整大小和位置后，选中该图片，点击鼠标右键选择“转换为元件”。点击元件，在右侧属性栏，将元件命名为：headObj


2、插入边框
双击进入元件内部，创建多个关键帧，每帧放一张边框图。

 
点击【保存】这一步很重要


3、获取头像
新建图层，添加一张正方形图片，调整大小和边框大小一致，命名为：headImg
回到舞台，选中头像元件（即命名为headObj的元件），在元件上添加行为，如图：

<如何给元素添加行为>

在弹出的行为窗口中，选择 微信定制-显示微信头像，触发条件选“出现”，点击铅笔图标，编辑行为参数，选择目标元素为：headImg（元件实例headObj），点击确认。



4、添加暂停行为
新建图层，插入一个方形，添加行为：暂停（触发条件选“出现”），将其移至元件最下层。



二、制作选择边框功能
返回到舞台，在左右箭头上添加选择边框的功能，点击箭头来选择边框。
左箭头添加行为：上一帧 作用对象选 headObj


同理，右箭头添加 下一帧 的行为即可，作用对象选 headObj

三、上传头像
在 上传头像 按钮上添加行为：微信定制-定制图片
选择目标元素为：headImg（元件实例headObj）
操作成功后选择 回调函数 ，在 编辑 中输入 函数名称 为uploadf



四、生成头像

1、引入区域截图功能
使用木疙瘩官方提供的区域截图功能，方法是：
导入脚本：点击 文件 - 导入 - 脚本
勾选mugeda_page.js
点击 加号，粘贴下方地址：
https://card.mugeda.com/js/htm ... fy.js


输入下方代码：






2、生成区域截图头像
在 生成头像 按钮上添加行为：回调函数，函数名为：jietu


这样点击生成图像按钮，就能成功调用区域截图功能啦！

五、保存头像
1、添加暂停行为
新建图层，在舞台外插入“暂停”文本框，添加行为：暂停（触发条件选“出现”）
让每1帧的画面都暂停，方便进行画面之间的切换控制。



2、添加友好的等候界面
在舞台第2帧添加等候界面，可以自由设计。



3、保存头像
在舞台第3帧插入方形图片，调整大小和位置（与第1帧的头像元件一致）
并为图片命名为：finalImg


这样代码就能将合成的头像显示在这张图片上了，是不是很酷？

4、再玩一次
在 再玩一次 按钮上添加行为：跳转并停止  选帧号为1


这样用户就能回到首页继续制作头像了！
 
记得保存！保存！保存！

电脑端打开共享编辑地址：https://cn.mugeda.com/animation/edit/1e4de26a

注：如果你是木疙瘩新用户，请先注册然后 [文件 ] - [ 另存为 ]，即可把此案例Demo保存到自己账号中。

更多H5基础教程（可手机观看）：
http://m.mugeda.com/lessonlist 收起阅读 »

var scrollTop = 0;



window.addEventListener('focusin', function(){

    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

});



window.addEventListener('focusout', function(){

    window.scrollTo({

        top: scrollTop,

        behavior: "smooth"

    });

});

var scrollTop = 0;



window.addEventListener('focusin', function(){

    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

});



window.addEventListener('focusout', function(){

    window.scrollTo({

        top: scrollTop,

        behavior: "smooth"

    });

});

 
 
把上面的代码加到作品的代码框里，然后保存，发布。
 
效果如图


 
  收起阅读 »

开头不知道咋写了，直接上案例吧，传送门：预览链接
编辑地址：https://www.mugeda.com/animation/edit/4e1b70eb
本教程倒计时采用的时时间戳原理，这里不做详细介绍，如需了解时间戳，可自行百度“时间戳” 即可，主要是利用时间戳，计算出目标时间与当前时间相差的秒数（时间差），然后将相差的秒数转换为天、时、分等；（其实就是一个时间坐标参考点）

第一步
在舞台上添加8个文本。分别命名为当前时间戳、目标时间、目标时间戳、时间差、天、时、分、秒

目标时间：直接写你要倒计时到哪一天(格式：年-月-日空格时:分:秒，例如2019-10-01 08:08:08)

然后在舞台上添加一个定时器，设置为毫秒，循环播放，主要是利用定时器不断地变化来对行为进行控制赋值。


 
在定时器上添加行为，执行条件都设置为属性改变，分别为当前时间戳、目标时间戳、时间差、天、时、分、秒等为其赋值
 


 
分别对其赋值为
当前时间戳 
Math.round(new Date().getTime()/1000) 


目标时间戳 
Math.round(new Date("{{目标时间}}")/1000) 


时间差 
{{目标时间戳}}-{{当前时间戳}} 

天 
 Math.floor({{时间差}}/60/60/24) //整数部分代表的是天；

时 
Math.floor({{时间差}}/60/60%24)

分 
Math.floor({{时间差}}/60%60)

秒 
Math.floor({{时间差}}%60)


最近发现了一个宝藏功能，正在慢慢研究，以后分享给大家。
以上倒计时只是其中一种方法，还有其他方法，这里不做过多介绍，有兴趣可以私聊。
 
由于本人较懒，以上教程过于简略，勿喷！
本人不懂代码，教程只针对与无代码基础人士，大神勿喷
  收起阅读 »

<<<点击此处进入直播间>>>
 
由中国记协新媒体专业委员会主办的第二十九届中国新闻奖获奖名单正处于公示期。
其中媒体用木疙瘩创作并进入拟获奖名单的作品有一等奖一个、二等奖两个、三等奖三个。
在这次新闻奖大赛中，看出新媒体创意互动作品在新闻界的重要地位，由此抛出几个问题。

在新媒体中H5的应用场景？
如何在众多的H5作品脱颖而出？
创意互动H5作品有什么优势？
....

这都是大家最为关心的问题，为此我们举办了一次免费直播培训，邀请木疙瘩CEO王志为大家一一解答。

 
<<<点击此处进入直播间>>>
 
 
另外小木还申请了超实用的福利
由红网时刻新闻出品的精品新闻模版
价值500元，限量500份

免费送！免费送！免费送！

对你没有听错免费送！

扫描下方二维码即可参与


  收起阅读 »