您的位置：首页 > 移动开发

Html5 移动端 触摸滑动事件

2017-08-20 20:39 309 查看
以下代码经过测试  没有问题 且可以循环滑动

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>html5测试</title>

    <link href="Css/Index.css" rel="stylesheet" />

</head>

<body>

    <div id="Index" style="text-align: center; width: auto;">

        <img src="img/1.jpeg" class="imagestart" style="display: block;" data-id="1" />

        <img src="img/2.jpeg" class="imagestart" data-id="2" />

        <img src="img/3.jpeg" class="imagestart" data-id="3" />

    </div>

    <script src="/js/jquery-1.12.4.min.js"></script>

    <script>

        //初始化获取浏览器的屏幕的宽度

        var LoadWidth = parseInt($(window).width());

        //初始化触摸起点X轴

        var loadX = 0;

        //初始化触摸起点Y轴

        var loadY = 0;

        //初始化鼠标松开的X轴

        var MoveUp = 0;

        $(function () {

            //

            $(".imagestart").on('touchstart', function (e) {

                var id = e.originalEvent.targetTouches[0];

                //获取鼠标的起始位置x

                var x = id.pageX;

                //赋值起始位置x

                loadX = x;

                //点击时赋值鼠标起来的坐标 在移动的时候会更新这个变量

                MoveUp = x;

                //获取鼠标的起始位置y

                var y = id.pageY;

                loadY = y;

                $(this).css('position', 'fixed');

            })

            //

            //

            $(".imagestart").on("touchmove", function (e) {

                var id = e.originalEvent.targetTouches[0];

                //获取鼠标的每次移动位置x

                var x = id.pageX;

                MoveUp = x;

                //获取鼠标的每次移动位置y

                var y = id.pageY;

                var ThisLoad = $(this);var ddd = x - loadX;

                //移动元素

                ThisLoad.animate({ 'left': x - loadX + "px" }, 0);

                

                if ($(this).attr("data-id") == 3) {

                    //$(".imagestart").hide();

                    $(".imagestart").eq(0).show();

                } else {

                    $(this).next().show();

                }

            })

            //

            //

            $(".imagestart").on("touchend", function (e) {

                //当手指松开的时候  计算鼠标移动开始到结束 x轴变化多少

                var MoveX = loadX - MoveUp;

                if (MoveX<0) {

                    MoveX = MoveUp - loadX;

                }

                

                $(".imagestart").css("left", "0px");

                //如果移动的x轴  大于浏览器宽度的3/10 则换图片

                if (MoveX / LoadWidth > 0.4) {

                    if ($(this).attr("data-id") == 3) {

                        //隐藏所有

                        $(".imagestart").hide();

                        //清空元素的style

                        $(".imagestart").removeAttr("style");

                        //让第一个显示

                        $(".imagestart").eq(0).css("display", "block");

                    } else {

                        //隐藏当前

                        $(this).css("display", "none");

                        //显示下一个元素

                        $(this).next().show();

                    }

                } else {

                    //如果移动的位置屏幕的40%小于  则图片返回到初始的位置

                    $(this).animate({ "letf": "0px" },0);

                }

                //恢复初始坐标

                loadX = 0;

                //恢复鼠标松开坐标

                MoveUp = 0;

            })

            //

        })

    </script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航