mohong
mohong
  • 发布:2016-05-22 23:13
  • 更新:2016-05-22 23:13
  • 阅读:1521

怎么能实现摇一摇结束后返回结果

分类:HTML5+

怎么能实现摇一摇结束后返回结果,比如弹出一个框,又比如微信:

微信摇一摇效果

官方源码:

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>Hello H5+</title>  
        <script type="text/javascript" src="../js/common.js"></script>  
        <script type="text/javascript">  
            var p=null;  
            var iLast=2,MAX=20;  
            var up=null,down=null,offset=50;  
            var t=null;  
            // H5 plus事件处理  
            function plusReady(){  
                // 锁定只能竖屏显示  
                plus.screen.lockOrientation( "portrait-primary" );  
                // 监听加速度  
                plus.accelerometer.watchAcceleration( function ( a ) {  
                    if(!up){  
                        return;  
                    }  
                    if ( !p && ( Math.abs(a.xAxis)+Math.abs(a.yAxis)+Math.abs(a.zAxis) > MAX ) ){  
                        // Play audio  
                        p = plus.audio.createPlayer("_www/audio/shake.wav");  
                        p.play();  
                        setTimeout( function(){  
                            // Change background image  
                            var index = Math.round(Math.random()*3+1);  
                            if ( iLast == index ) {  
                                index++;  
                                if ( index > 4 ) {  
                                    index = 1;  
                                }  
                            }  
                            document.body.style.backgroundImage="url(../img/shake/"+index+".jpg)";  
                            iLast = index;  
                            // Stop play audio  
                            p.stop();  
                            delete p;  
                            p = null;  
                        }, 2000 );  
                        // Animation  
                        offset=up.offsetHeight/2;  
                        up.style.webkitTransform = "translateY(-"+offset+"px)";  
                        up.style.msTransform = "translateY(-"+offset+"px)";  
                        down.style.webkitTransform = "translateY("+offset+"px)";  
                        down.style.msTransform = "translateY("+offset+"px)";  
                        if ( t ) {  
                            clearTimeout( t );  
                        }  
                        t = setTimeout( function() {  
                            t = null;  
                            up.style.webkitTransform = "";  
                            up.style.msTransform = "";  
                            down.style.webkitTransform = "";  
                            down.style.msTransform = "";  
                        }, 700 );  
                    }  
                }, function ( e ) {  
                    //outSet( "Watch failed: "+e.message );  
                }, {frequency:100} );  
            }  
            if(window.plus){  
                plusReady();  
            }else{  
                document.addEventListener("plusready",plusReady,false);  
            }  
            // 监听DOMContentLoaded事件  
            document.addEventListener("DOMContentLoaded",function(){  
                up=document.getElementById("up");  
                down=document.getElementById("down");  
                offset=up.offsetHeight/2;  
            },false);  
            // 解锁并关闭  
            var _back=window.back;  
            function unlockback(){  
                plus.screen.unlockOrientation();  
                _back();  
            }  

            window.back=unlockback;  
        </script>         
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>  
    </head>  
    <body style="background: center center no-repeat url(../img/shake/1.jpg);">  
        <header id="header">  
            <div class="nvbt iback" onclick="back()"></div>  
            <div class="nvtt">摇一摇</div>  
        </header>  
        <div style="height:100%;text-align:center;overflow:hidden;">  
            <div id="up" style="width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">  
                <img style="height:100%;" src="../img/shakeup.png"/>  
            </div>  
            <div id="down" style="padding-bottom:20px;width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">  
                <img style="height:100%;" src="../img/shakedown.png"/>  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript" src="../js/immersed.js" ></script>  
</html>
2016-05-22 23:13 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复