JavaScript在智能手机上的应用-用手势改变图片的显示方向

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

<script type="text/javascript">
            //初始化函数,绑定触屏事件
            function init() {
                var div = document.getElementById("div");
                div.ongesturechange = function(e){
                    //rotation代表手势的旋转,[0<=x<=360],正值顺时针旋转,负值逆时针
                    var rot = e.rotation;
                    //获取图片的dom
                    var img = document.getElementsByTagName('img')[0];
                    if(rot>0){
                        img.src = "./2.jpg";    //如果顺时针则用2jpg
                    }else if(rot<0){
                        img.src = "./1.jpg";    //如果逆时针则用1jpg
                    }
                };
            }
        </script>

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

<style>
            div{
                border:2px solid red;
                color:red;
                margin: 10px auto;
                padding: 20px;
                text-align: center;
            }
        </style>

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

 <body onload="init();">
        <div id="div">
            <img src="1.jpg" width="500" height="500"/>
        </div>
    </body>

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

posted @ 2016-10-08 19:39  承载梦想-韩旭明  阅读(297)  评论(0编辑  收藏  举报