html5案例——【梦想有理，幻想无界】

今天分享的HTML5案例是来自163的【梦想有理，幻想无界】专题

    效果图：

    

    专题特色：

    1、一开始的模拟指纹识别的效果，通过获取手指按屏幕的时间来做动画，专题核心源码：

fingerEl.bind('touchstart', function(e) {     e.preventDefault();     e.stopPropagation();     fingerEl.addClass('active');     pressTimeoutId && clearTimeout(pressTimeoutId);     pressTimeoutId = setTimeout(function() {         fingerEl.addClass('done');         that._onOp && that._onOp();     }, 3000);     return false; }).bind('touchend', function(e) {     e.preventDefault();     e.stopPropagation();     fingerEl.removeClass('active');     pressTimeoutId && clearTimeout(pressTimeoutId);     return false; });

    它这里是通过监听touchstart和touchend，中间给个计时器，超过一定时间就触发后面动画。

    2、里面有一屏是需要“举起手机”才能进入下一步动画，这个挺有创意的，通过计算手机的屏幕垂直旋转来实现，专题核心代码：

if (window.DeviceMotionEvent) {     window.addEventListener("devicemotion", function(event) {         that._gZ = event.accelerationIncludingGravity.z;         isIPhone && (that._gZ = -that._gZ);     }, false); } else {     this._gZ = -9; }

    3、最后一个交互“亲TA一下”，其实不用真的用嘴去亲屏幕，用两个手指触屏也会触发。通过监控触屏的，专题核心代码：

$('.page4').bind('touchstart', function(e) {     if (e.originalEvent.touches.length > 1) {//超过1个触点         done = true;         $('.page4').removeClass('touch').addClass('moving');         that._onOp && setTimeout(that._onOp, 5000);         return false;     } else {         if (!done) {             $('.page4').addClass('touch');         }         return false;     } });

    二维码：

    

    看到别人做出来的效果，通过分析一下，获取和学习自己认为好的东西，下次在自己遇到这个需求时可以快速上手，这也是一种高效学习方法喔！更多HTNL5案例 http://www.w3cmark.com/html5/