对移动端h5项目的一点总结

蚊子前端博客
发布于 2016-10-08 00:00
到现在也做了不少的h5,遇到了不少的坑,也对曾经的经验教训总结一下

到现在也做了不少的h5,遇到了不少的坑,也对曾经的经验教训总结一下。

主要做过的项目有:

每个项目都有这样那样的难点,现在都分别总结一下。

1. 智图派-腾讯财经

项目地址为: http://finance.qq.com/zt2015/nzcehua1/zhitupai.htm

这个项目的亮点是进入到首页后,就是根据当前的时间,每一位都滚动到对应的数字。我实现的思路是:

  1. 计算当前时间与设定好的时间节点之间的时间差;

  2. 将时间差转换为数组;

  3. 根据数组的位数,给每一位都填充上0-9这10个数字;

  4. 使用CSS3的transitiontransform,获取每个数字的高度和当前位置的数字,计算出滚动的距离。

CSS:

COPYCSS

.timer .t{ font-size: 3rem; line-height: 3rem; border: 2px solid #a2a2a2; height: 62px; overflow: hidden; display: inline-block; margin-right: 4px; } .timer .t div{ -webkit-transition: -webkit-transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms; -ms-transition: transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms; transition: transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms; } .timer .t em{ padding: 7px 12px; display: block; font-style: normal; }

HTML:

COPYHTML

<div class="timer"></div> <input type="button" value="启动" id="start">

JS:

COPYJAVASCRIPT

(function(){ var left = ''; function set(){ var point = 1451577600, // 节点 now = parseInt( Date.now()/1000 ); // 当前时间 left = now-point; left = (left+'').split(''); // 将数字转换为数组 var html = ''; for(var i=0, len=left.length; i<len; i++){ html += '<div class="t"><div>'; for(var j=0; j<10; j++){ html += '<em>'+j+'</em>'; } html += '</div></div>'; } $('.timer').html( html ); } set(); $('#start').on('click', function(){ var em_height = $('.timer .t').find('em').eq(1).outerHeight(true); for(var i=0, t=left.length; i<t; i++){ var y = '-'+em_height*parseInt(left[i])+'px'; $('.timer .t').eq(i).children('div').css({'-webkit-transform': 'translate3d(0, '+ y +', 0)', 'transform': 'translate3d(0, '+ y +', 0)'}); } }) })();

演示:

2. 腾讯财经年终策划

项目地址为: http://finance.qq.com/zt2015/nzcehua1/2015pandian.htm

用户可以直接从链接进来,或者从朋友分享的链接进来。不过从这两个入口进入后,呈现出的页面是不同的。直接进入时,loading完成之后会显示首页;而从朋友的分享结果进入时,会首先展示刚才那个朋友选择的心情,直到用户点击“我要定制心情曲线”按钮才进入到首页。因此需要把这两个链接区分开来。

我设定的方法是 当用户分享链接时,在链接后添加一个参数,当进入该页面时,判断链接里是否有这个自定义的参数;若有这个参数,则表明是从分享的链接进入的,首先显示分享结果页面;否则显示首页。因为要显示上个朋友的心情结果,得需要把这个朋友的心情添加到链接中,然后下次打开时,从这个链接中取出。

每个题目都有四种心情可供选择:赞,喜,哦,怒!为了不在链接中使用汉字,因此使用0, 1, 2, 3分别表示这四种心情,然后用|隔开。如btf=1|1|0|3|0|0|0|2|2|0|0|0|0,第一个1不是心情。

还有标题,结果页面中心情标题根据用户在这12个事件中选择的心情的分部,显示不同的标题。

COPYJAVASCRIPT

share_title :{ xi : '小主心情高亢,2016一起装逼一起飞', // 7个及其以上大喜的表情 ai : '哀伤侵占小主内心,求新年红包安慰', // 7个及其以下哀伤的表情 rdm : [ // 其他随机结果 '世界那么大,钱包那么小,求安慰', '小主心情波澜,2016只求河蟹日子', '过去一年日子不太平,且过且珍惜吧', '心情乌云你快走开,新年要有新气象', '别问我心情如何,2016年我想静静', '2015真是蛋蛋的忧伤,2016滚粗', ] }

从上面的代码可以看到,两个固定的心情和6个随机的心情。两个固定的表情可以从上面的btf参数计算出,但是随机的心情则需要传递一个参数,指定某一个心情,使当前用户和从分享链接进入的用户看到的心情是一样的。因此我在链接中又添加一个share_title的参数,这个参数的值一共有三种,xi, ai, 0(1, 2, 3...),根据不同的值展示不同的心情标题。

因此分享后的链接是是这样的:

http://finance.qq.com/zt2015/nzcehua1/2015pandian.htm?btf=1|1|0|3|0|0|0|2|2|0|0|0|0&share_title=2

3. NBA全明星推广

这个html5没什么难点,不过也从这个项目才知道,移动端的音频或视频必须通过用户手动触发后才能播放。

COPYJAVASCRIPT

// 对不支持自动播放的设备使用一次性的 touchstart 事件触发 $(document).one('touchstart', function() { bgMusic.play(); });

4. 看见淤青有多难

这个项目已经在3月份的时候总结过了,可点击链接查看。

5. 奥运暗黑室

奥运暗黑室是在奥运即将结束时推出的一款项目,旨在考验用户的记忆力。

项目地址:http://2016.qq.com/photos/product/darkroom/0820.htm

在这个项目中用到了打字效果,使用的是TheaterJS,不过也没太多复杂的效果,就是用打字效果出现两行字,中间有个删除的功能;当两行字全部显示完毕后,展示出按钮。

COPYJAVASCRIPT

var theater = new TheaterJS(); theater.describe("Vader", .76, "#vader") theater .write("Vader:一大波僵尸") .write(-2) .write("挑战记忆的新闻来袭") .write(200) .write(function(){ $('.loading p').removeClass('target').eq(1).addClass('target'); }) theater.describe("Say", .76, "#say") theater .write("Say:证明自己实力的时刻到了") .write(200) .write(function(){ $('.bgimg, .loading .text .btn, .loading .up').addClass('fadeIn animated'); $('#say').removeClass('target'); $('.music').show(); });

TheaterJS链接:

6. 摇一摇

项目地址: http://news.qq.com/FERD/kb_national.htm

这是为了推广快报做的一个h5活动,在h5里摇签,在快报里解签。

摇一摇:

COPYJAVASCRIPT

;(function(){ // 摇一摇 var SHAKE_THRESHOLD = 2000, // 灵敏度。 数字越小,灵敏度越高 last_update = 0, x=y=z=last_x=last_y=last_z=0; function init(){ last_update=new Date().getTime(); if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } else{ // alert('您的手机不支持摇一摇'); } } function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ( (curTime - last_update)> 100) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; if ( speed > SHAKE_THRESHOLD) { // 摇一摇发生的事件 // ... } last_x = x; last_y = y; last_z = z; } } init(); })();

总结

以后还会有更多的移动项目等待我们,也还会遇到各种各样的问题。每次遇到问题时,就总结一下,涨一次教训。

标签:
阅读(745)

公众号:

qrcode

微信公众号:前端小茶馆

相关文章

2013年的希冀 (2013/01/01)
2014的希冀 (2014/01/02)
2015年1月份总结 (2015/02/04)
2015年2月份总结 (2015/03/03)
2015年4月份总结 (2015/05/01)

公众号:

qrcode

微信公众号:前端小茶馆