木疙瘩M神挑战赛—足迹
loading背景用了木疙瘩品牌色,以及脚印的元素来表达出公司一步一个脚印,一直向前!
作品地址:http://0.u.h5mc.com/c/javs/p6n_/index.html
作品二维码:
收起阅读 »
作品地址:http://0.u.h5mc.com/c/javs/p6n_/index.html
作品二维码:
收起阅读 »
木疙瘩M神挑战赛—夏天的纸飞机
作品截图:
作品地址:http://0.u.h5mc.com/c/l_xo/yolh/index.html
作品二维码:
作品介绍:
采用蓝色背景以示天空,期盼空中掠过的纸飞机给用户带去一丝凉爽——童年的夏天,夏天的纸飞机。 收起阅读 »
作品地址:http://0.u.h5mc.com/c/l_xo/yolh/index.html
作品二维码:
作品介绍:
采用蓝色背景以示天空,期盼空中掠过的纸飞机给用户带去一丝凉爽——童年的夏天,夏天的纸飞机。 收起阅读 »
木疙瘩M神挑战赛—颤抖的小圆
作品截图:
作品地址:https://d.u.mgd5.com/c/s53a/iyun/index.html
作品简介:
用循环变换的圆形作为加载进度的底色,动画效果选择比较俏皮有趣的抖动特效,让用户在有趣和期盼中等待H5作品。
大家多多支持!喜欢我的创意,就给我点赞啊伙伴们!!
收起阅读 »
作品地址:https://d.u.mgd5.com/c/s53a/iyun/index.html
作品简介:
用循环变换的圆形作为加载进度的底色,动画效果选择比较俏皮有趣的抖动特效,让用户在有趣和期盼中等待H5作品。
大家多多支持!喜欢我的创意,就给我点赞啊伙伴们!!
收起阅读 »
木疙瘩M神挑战赛:实时战况2019-7-5
每个工作日下午2点,更新点赞排行榜!
2019-07-05 14:00
==================================================================
名次 用户名 赞数 作品名 作品地址
第1名 qq9487292039 2 M神本神 http://bbs.mugeda.com/?/article/720
第2名 m02394803924 1 颤抖的小圆 http://bbs.mugeda.com/?/article/719
==================================================================
候选作品推荐(推给CEO评奖,直接升为M神的候选名单哦)
暂无 收起阅读 »
木疙瘩M神挑战赛:参赛规则
木疙瘩史上 最简单! 最有创意! 中奖率最高 的一次挑战赛来了!!!
<活动简介>
挑战时间:7/4-7/18 [为期2周]
挑战内容:利用木疙瘩平台制作创意加载页动画
M神尊位:10位
<M神奖品>
10位M神将获得多重尊贵礼遇:
- 1元钱开通1个月标准会员,通用模版无限使用、享受尊贵的人工客服通道!
- 7、8月通过认证设计师考试者,证书工本费邮费全免!
- 获得木疙瘩全平台为期2周的宣传!
你以为这样就完了吗?!
我们还额外提供手气红包,就是看谁的手快!
- 前50名投稿者每人获得10元木疙瘩充值卡
- 前20名获得CEO候选推荐者每人获得20元木疙瘩充值卡
<如何参与>
第一步. 制作加载页效果
使用木疙瘩制作H5加载页,要求有创意、不能使用序列帧和GIF
第二步. 提交参赛
在木疙瘩论坛发帖,即可参赛!
请按下面格式发帖(很重要):
——————————————————————————————
发帖模式:文章
标题格式:木疙瘩M神挑战赛—作品名称
添加话题:M神挑战
发帖内容:作品截图(录制GIF效果更佳)、作品地址、作品介绍
——————————————————————————————
<评奖方法>
通过2种途径,分别选出5位M神!
——发帖点赞数前5名
由论坛网友选出,赶快为你心中最具创意的作品帖子点赞吧!
——由木疙瘩CEO选出另外5位
只看创意和技术,不看点赞数!只要活儿好、脑洞大,M神就是你!
<实时战况>
实时战报 2019-7-9 14:00 更新 >>
实时战报 2019-7-8 14:00 更新 >>
实时战报 2019-7-5 14:00 更新 >>
关注木疙瘩论坛右上角的“木疙瘩M神挑战赛”专题,获得最新活动信息! 收起阅读 »
木疙瘩#每日分享吧#2019-06-10
木疙瘩每日分享吧
2019年6月10日 星期一
——————————————
【案例分享】
浙商杂志-第16届浙商大会暨5G+峰会邀请函
http://uee.me/aVRU6
来人呀,快抓住这个2018
http://uee.me/aVRU8
中国移动和商企
http://uee.me/aVRU9
【每日一答】
Q:我想做一个从数字1到70的动画,有什么快速的方法吗?
A:用定时器控制触发“改变元素属性”的行为
——————————————
木疙瘩6月金牌服务包重磅更新,速来领取 收起阅读 »
2019年6月10日 星期一
——————————————
【案例分享】
浙商杂志-第16届浙商大会暨5G+峰会邀请函
http://uee.me/aVRU6
来人呀,快抓住这个2018
http://uee.me/aVRU8
中国移动和商企
http://uee.me/aVRU9
【每日一答】
Q:我想做一个从数字1到70的动画,有什么快速的方法吗?
A:用定时器控制触发“改变元素属性”的行为
——————————————
木疙瘩6月金牌服务包重磅更新,速来领取 收起阅读 »
木疙瘩#每日分享吧#2019-06-11
木疙瘩每日分享吧
2019年6月11日 星期二
——————————————
【模版推荐】
时光列车 定制我的火车票
http://uee.me/aVSUG
津城日渐消失的老行当
http://uee.me/aVSUH
pick你的90后关键词
http://uee.me/aVSUJ
(如何快速找到以上模版?)
打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可
【每日一答】
Q:木疙瘩的翻页效果,设置了以后全篇都是一样的翻页效果么?可以给每页设置不同的翻页效果么?
A:默认是设置全局的翻页效果,可通过添加翻页行为给每页设置不同的翻页效果。
——————————————
【本周在线直播培训】
主题:H5新闻微专栏及可视化专题制作
嘉宾:木疙瘩CEO王志
时间:本周四晚7点
直播间:http://u6.gg/sE5eU
(可发到电脑上全屏观看)
——————————————
本期编辑:木木 收起阅读 »
2019年6月11日 星期二
——————————————
【模版推荐】
时光列车 定制我的火车票
http://uee.me/aVSUG
津城日渐消失的老行当
http://uee.me/aVSUH
pick你的90后关键词
http://uee.me/aVSUJ
(如何快速找到以上模版?)
打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可
【每日一答】
Q:木疙瘩的翻页效果,设置了以后全篇都是一样的翻页效果么?可以给每页设置不同的翻页效果么?
A:默认是设置全局的翻页效果,可通过添加翻页行为给每页设置不同的翻页效果。
——————————————
【本周在线直播培训】
主题:H5新闻微专栏及可视化专题制作
嘉宾:木疙瘩CEO王志
时间:本周四晚7点
直播间:http://u6.gg/sE5eU
(可发到电脑上全屏观看)
——————————————
本期编辑:木木 收起阅读 »
木疙瘩#每日分享吧#2019-06-12
木疙瘩每日分享吧
2019年6月12日 星期三
——————————————
【元件动画源文件共享】
超酷转盘加载特效
预览地址:
http://uee.me/aVT7k
打开共享源文件,将作品另存到自己账号中
共享源文件:
https://www.mugeda.com/animation/edit/ddbe3454
【每日一答】
Q:木疙瘩只能联网使用吗?有没有下载版软件?
A:木疙瘩有离线版软件可以下载使用。点击木疙瘩官网顶部的“离线版”按钮,可以找到下载链接。
——————————————
【融媒全家桶模版包】上线:
✅包含23个精品模版
✅涵盖10类高频应用场景
✅300+页面可自由排列组合
查看模版包:http://u6.gg/sEyhP
——————————————
本期编辑:木木 收起阅读 »
2019年6月12日 星期三
——————————————
【元件动画源文件共享】
超酷转盘加载特效
预览地址:
http://uee.me/aVT7k
打开共享源文件,将作品另存到自己账号中
共享源文件:
https://www.mugeda.com/animation/edit/ddbe3454
【每日一答】
Q:木疙瘩只能联网使用吗?有没有下载版软件?
A:木疙瘩有离线版软件可以下载使用。点击木疙瘩官网顶部的“离线版”按钮,可以找到下载链接。
——————————————
【融媒全家桶模版包】上线:
✅包含23个精品模版
✅涵盖10类高频应用场景
✅300+页面可自由排列组合
查看模版包:http://u6.gg/sEyhP
——————————————
本期编辑:木木 收起阅读 »
【代码分享】超少代码实现到特定时间活动结束的效果
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。 收起阅读 »
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。 收起阅读 »
【代码分享】设置作品只能在微信浏览器打开
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeixin) {
document.head.innerHTML = '<title>请在微信客户端打开</title>'; //可更改里面的提示文字
document.body.innerHTML = '<h3 style="text-align: center">请在微信客户端打开 </h3><div align="center"><img src="http://t.im/h4w1" width="300" /></div>';
}
//页面提示内容 src=""双引号里面的网址可更换为自己作品的二维码链接
//if (!isWeixin) {} 这个是执行内容
复制上方加粗代码到mugeda代码框里即可,有问题可回复或点击我空间联系。
收起阅读 »
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeixin) {
document.head.innerHTML = '<title>请在微信客户端打开</title>'; //可更改里面的提示文字
document.body.innerHTML = '<h3 style="text-align: center">请在微信客户端打开 </h3><div align="center"><img src="http://t.im/h4w1" width="300" /></div>';
}
//页面提示内容 src=""双引号里面的网址可更换为自己作品的二维码链接
//if (!isWeixin) {} 这个是执行内容
复制上方加粗代码到mugeda代码框里即可,有问题可回复或点击我空间联系。
收起阅读 »
【经验分享】横屏下安卓机视频和输入框还是竖直的,一般的推荐处理方法
安卓机下视频和输入框在竖屏下一般没有问题,横屏时会受系统的一些限制,可以用下边的方法来处理一下
输入框问题,直接使用回调函数调用浏览器弹窗形式的输入框:
https://www.mugeda.com/animation/edit/b424e791
以上链接可以打开另存
视频横屏新方法:作品1,舞台宽520高320,视频宽520高320,视频设置同层,旋转模式默认,发布得到发布链接;作品2,舞台宽520高320,旋转模式强制横屏,舞台上添加网页控件,把作品1的发布链接嵌入,最后发布作品2
输入框的的问题,可以在作品里添加代码来检测用户的屏幕是不是横的,如果不是,给出提示让用户把手机的横屏锁打开并转动屏幕。具体可以参考这个帖子:http://bbs.mugeda.com/?/article/707
视频的问题,目前推荐使用同层视频的功能,但使用同层视频需要视频最好是和屏幕的宽和高是一致的,不然可能无法触发同层视频的功能。然后把视频放到舞台外,再在舞台中用一个按钮添加点击行为(只能是点击行为)去控制视频移到舞台中和控制视频行为(是控制视频行为不是播放视频行为)播放视频。具体请参考这个demo:https://www.mugeda.com/animation/edit/788b7719。另外,可以考虑视频在渲染的时候就直接是旋转了90度的,再放在舞台上。
另外,如果视频本身不大,可以考虑把视频转成关键帧动画做到元件里,并使用元件关联到一个舞台上的一个音频,具体可以参考这个demo:https://cn.mugeda.com/animation/edit/8a19edee 收起阅读 »
输入框问题,直接使用回调函数调用浏览器弹窗形式的输入框:
https://www.mugeda.com/animation/edit/b424e791
以上链接可以打开另存
视频横屏新方法:作品1,舞台宽520高320,视频宽520高320,视频设置同层,旋转模式默认,发布得到发布链接;作品2,舞台宽520高320,旋转模式强制横屏,舞台上添加网页控件,把作品1的发布链接嵌入,最后发布作品2
输入框的的问题,可以在作品里添加代码来检测用户的屏幕是不是横的,如果不是,给出提示让用户把手机的横屏锁打开并转动屏幕。具体可以参考这个帖子:http://bbs.mugeda.com/?/article/707
视频的问题,目前推荐使用同层视频的功能,但使用同层视频需要视频最好是和屏幕的宽和高是一致的,不然可能无法触发同层视频的功能。然后把视频放到舞台外,再在舞台中用一个按钮添加点击行为(只能是点击行为)去控制视频移到舞台中和控制视频行为(是控制视频行为不是播放视频行为)播放视频。具体请参考这个demo:https://www.mugeda.com/animation/edit/788b7719。另外,可以考虑视频在渲染的时候就直接是旋转了90度的,再放在舞台上。
另外,如果视频本身不大,可以考虑把视频转成关键帧动画做到元件里,并使用元件关联到一个舞台上的一个音频,具体可以参考这个demo:https://cn.mugeda.com/animation/edit/8a19edee 收起阅读 »
【代码分享】检测用户屏幕是否是横的,并给出需要横屏的提示
可以直接扫码看效果
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思
在以下公众号回复“横屏提示”,获取本文的源文件链接
收起阅读 »
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var tips = scene.getObjectByName('提示');
var screenDirection = window.matchMedia("(orientation: portrait)");
screenDirection.addListener(handleOrientationChange);
handleOrientationChange(screenDirection);
function handleOrientationChange(screenDirection) {
if (screenDirection.matches) {
/* 竖屏处理事件 */
tips.top = 0;
} else {
/* 横屏屏处理事件 */
tips.top = -350;
}
}
});
在以下公众号回复“横屏提示”,获取本文的源文件链接
收起阅读 »
【通知】2019端午节木疙瘩服务时间
相关问题:
——作品审核——
建议不要反复修改重新发布,会影响您的项目上线,造成不必要的麻烦。如急需上线可购买会员,发布后直接查看并使用。
——付费会员人工客服——
登录后网页右侧橙色图标 - 人工客服
——智能机器人——
登录后网页右侧橙色图标 - 智能客服
——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 收起阅读 »
【代码分享】H5里实现微信点击图片全屏预览预览效果,可双指缩放图片
先预览一下看效果:
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码
需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
收起阅读 »
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
window.checkuseragent = function(){
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
return false;
}else{
return true;
}
}
var picArr = ;
window.getimgurl = function(){
var max = 5; //这里的数字是需要按你自己图片的数量修改的
var j;
var picdom;
for (i = 0; i < max; i++) {
j = i+1;
picdom = scene.getObjectByName('pic'+j).dom;
picArr.push(picdom.src);
}
}
window.customview = function(){
if(checkuseragent()){
wx.previewImage({
current: picArr[0],
urls: picArr
});
}
}
});
需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
收起阅读 »
【代码分享】判断多选控件选中了几个
如果选中了3个,点“验证”文本时,会判断出选中了3个,不然会判断没选中3个。“验证”文本上设置了回调函数,会去检查“复选框1”的内容。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var fuxuankuang = scene.getObjectByName('复选框1');
window.selectchecklist = function(){
var _arr = fuxuankuang.text.split(';');
if(_arr.length == 3){
scene.getObjectByName('判断结果').text = '已选3个';
}else{
scene.getObjectByName('判断结果').text = '不是3个'
}
}
});
在以下公众号回复“判断多选”,获取本文的源文件链接
收起阅读 »
【通知】2019五一劳动节木疙瘩服务时间
相关问题:
——作品审核——
建议不要反复修改重新发布,会影响您的项目上线,造成不必要的麻烦。如急需上线可购买会员,发布后直接查看并使用。
——付费会员人工客服——
登录后网页右侧橙色图标 - 人工客服
——智能机器人——
登录后网页右侧橙色图标 - 智能客服
——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 收起阅读 »