html5 手機端通信錄 touch 效果

時間 2019-11-20

標籤 html5 html 手機通信 touch 效果欄目 HTML5 简体版

原文原文鏈接

不說那麼多直接上代碼。css

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>無標題文檔</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
    <style>
        p{
            height:20px;
            
            font-size:80px;
            text-align:center; 
            color:#F70000;
        }
        .val{
            position:absolute;
            top:20%;
            left:10%;
            background-color:#93C763;
            z-index:20;
            font-size:80px;
        }
         * {
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         }
        #test {
            margin-left:70%;
            width:100px;
            border-color:#F70000;
            border: 2px solid ;
        }
    </style>
<script>
    var carselect = {
        /*******************
        * 加載綁定事件
        *******************/
        int: function () {
            //手滑過
            $("#test").on("touchmove", function (event) {
                carselect.selected(event);
            });

            //手滑入
            $('#test').on('touchstart', function (event) {
                $(this).css("background-color", "#D6D6D6");
                carselect.selected(event);
            });

            //手放開
            $('#test').on('touchend', function (event) {
                $(".val").text("");
                $(this).css("background-color", "#FFFFFF");
            });
        },
        /*******************
        * 車型選擇（拼音）
        * @param {event} 事件監控元素
        *******************/
        selected: function (event) {
            if (event.originalEvent.targetTouches.length == 1) {
                event.preventDefault();
                var touch = event.originalEvent.targetTouches[0];
                var x = touch.pageX;
                var y = touch.pageY;
                var e = document.elementFromPoint(x, y);
                var val = $(e).text();
                if (val.length == 1) {
                    $(".val").text(val);
                }
            }
        }
    }
    $(function () {
        carselect.int();
    });
</script>
</head>
<body>
<div id="test" style="text-align:center; ">
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>
    <p>G</p>
    <p>H</p>
    <p>I</p>
    <p>J</p>
    <p>K</p>
</div>
    <div class="val"></div>
</body>
</html>