H5移动端手势滑动圆盘转动效果

最新推荐文章于 2022-07-17 05:36:30 发布

#麻辣小龙虾#

最新推荐文章于 2022-07-17 05:36:30 发布

阅读量4.2k

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/CodingNoob/article/details/79811330

版权

HTML5 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

这里写图片描述

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv = "Cache-Control" content = "no-transform">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name = "applicable-device" content = "mobile">
    <title>jquery.rotate旋转插件</title>
    <style>
        #box{height:800px;width:800px;margin:100px auto;line-height:900px;text-align:Center;color:#fff;font-size:120px;background:red;transition: all 1s;border-radius:400px;}
        #box .out-circle{position:relative;top:150px;width:500px;height:500px;border-radius:300px;margin:0 auto;background:yellow;}
        #box .item{position:absolute;left:175px;top:175px;width:150px;height:150px;border-radius:75px;line-height:150px;}

        #box .out-circle div:nth-of-type(2){transform: rotate(60deg);}
        #box .out-circle div:nth-of-type(3){transform: rotate(120deg);}
        #box .out-circle div:nth-of-type(4){transform: rotate(180deg);}
        #box .out-circle div:nth-of-type(5){transform: rotate(240deg);}
        #box .out-circle div:nth-of-type(6){transform: rotate(300deg);}
        #box .out-circle div:nth-of-type(1) a{border-radius:75px;background:blue;display:block;height:150px;width:150px;transform:translateX(-325px);}
        #box .out-circle div:nth-of-type(2) a{border-radius:75px;background:pink;display:block;height:150px;width:150px;transform: translateX(-325px);}
        #box .out-circle div:nth-of-type(3) a{border-radius:75px;background:black;display:block;height:150px;width:150px;transform: translateX(-325px);}
        #box .out-circle div:nth-of-type(4) a{border-radius:75px;background:green;display:block;height:150px;width:150px;transform: translateX(-325px);}
        #box .out-circle div:nth-of-type(5) a{border-radius:75px;background:orangered;display:block;height:150px;width:150px;transform: translateX(-325px);}
        #box .out-circle div:nth-of-type(6) a{border-radius:75px;background:olivedrab;display:block;height:150px;width:150px;transform: translateX(-325px);}
    </style>
</head>

<body>
    <div id="box" style="transform:rotate(0deg)">
        <div class="out-circle">
            <div class="item">
                <a href="#">1</a>
            </div>
            <div class="item">
                <a href="#">2</a>
            </div>
            <div class="item">
                <a href="#">3</a>
            </div>
            <div class="item">
                <a href="#">4</a>
            </div>
            <div class="item">
                <a href="#">5</a>
            </div>
            <div class="item">
                <a href="#">6</a>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">


    var deg = 0;
    var startX = 0;
    var endX = 0;
    var box = document.querySelector("#box");

    function boxTouchStart(e) {
        var touch = e.touches[0]; //获取触摸对象
        startX = touch.clientX; //获取触摸坐标
        console.log(touch);
    }

    function boxTouchMove(e) {

        endX = e.touches[0].clientX; //获取触摸坐标

    }

    function boxTouchEnd(e) {

        console.log(endX +"end");
        console.log(startX +"start");
        deg = parseInt(box.style.webkitTransform.replace("rotate(", ""));

        //向右边滑动
        if(endX - startX > 0){
            //console.log(deg);
            deg = deg + 90;
            box.style.webkitTransform = "rotate(" + deg + "deg)";
        }else{
            deg = deg - 90;
            console.log(deg);
            box.style.webkitTransform = "rotate(" + deg + "deg)";
        }
    }

    box.addEventListener("touchstart", boxTouchStart, false);
    box.addEventListener("touchmove", boxTouchMove, false);
    box.addEventListener("touchend", boxTouchEnd, false);



</script>

#麻辣小龙虾#

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
H5移动端手势滑动圆盘转动效果

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="viewpor
复制链接

扫一扫