2. 程式人生 > >H5移動端手勢滑動圓盤轉動效果

H5移動端手勢滑動圓盤轉動效果

阿新 • • 發佈：2019-02-05

這裡寫圖片描述

<!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>

相關推薦

H5移動端手勢滑動圓盤轉動效果

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name

1、js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

layui.carousel輪播元件實現移動端手勢左右滑動效果

var ins; layui.use(['carousel', 'form'], function () { var carousel = layui.carousel; ins = carousel.render({ elem

jquery touch 移動端上下滑動加載

hang blog change ldl scrollto jquery scroll edt end var touchStart, touchEnd, touchDiff = 80; $(window).on({ ‘touchs

h5移動端阻止瀏覽器長按事件

-1 ext clas move 事件 his 設置 urn log 移動端長按圖片或者元素的時候會出現默認的瀏覽器事件，這樣會影響自定義的長按行為，很麻煩。微信的圖片和元素的長按事件效果如下 找到了一個方式去掉首先要把圖片放到div的背景圖片中（用圖片試了不行，如果有大

移動端手勢事件 hammer.JS插件

情況 star white tab nal 手指 專家 向上 描述 一、引入hammer.JS 1.下載地址：http://download.csdn.net/detail/webxiaoma/9872249 2.官網地址：http:

基於jQuery的 h5移動端抽獎頁面插件

舉例 背景 active fun device none this 模板 循環 基於jQuery的 H5移動端頁面抽獎插件 12宮格抽獎頁面 采用rem布局，親測安卓機有效，用的是375px設計稿 同時可以學習下jQuery插件的基本模板是怎麽寫的。 案例下載地址：gith

前端 html h5 移動端 手機端 仿ios左滑刪除效果

es2017 b- open translate def sna 技術 9.png replace 實現功能：左滑列表項（<li class="route-item" ></li>），出現刪除按鈕(<div class="removeJs"&

移動端彈性滑動以及vue記錄滑動位置

我們 移除 顯示 lis 滑動 手指 oca 方式 -i -webkit-overflow-scrolling介紹 -webkit-overflow-scrolling: auto | touch; auto： 普通滾動，當手指從觸摸屏上移開，滾動立即停止 touch：滾動

H5移動端項目案例、web手機微商城實戰開發

ont 大眾 實戰 目前 微信 web 開發 移動 size 自微信生態圈一步步強大後，關於移動端購物的趨勢，逐漸成為大眾關心的內容，目前市場上關於移動商城的制定就有大量版本，比如、微商城、移動商城、移動webAPP、微信商城各等各種定義層出不窮，這就對於移動端電商的發展起

移動端tab滑動和上下拉刷新加載

ldo swiper 手勢 lock red height direction 不清楚 log 移動端tab滑動和上下拉刷新加載 查看demo（請在移動端模式下查看） 查看代碼 開發該插件的初衷是，在做一個項目時發現現在實現移動端tab滑動的插件大多基於swiper，sw

旅行app(遊記、攻略、私人定制) | 順便遊旅行H5移動端實例

宋體 image 代碼 rem 9.png 其中 http pos 圖片 《順便遊旅行》是一款H5移動端旅行app，提供目的地(國內、國外、周邊)搜索、旅遊攻略查詢、遊記分享、私人定制4大模塊，類似攜程、同程、去哪兒、馬蜂窩移動端，只不過順便遊app界面更為簡潔。 HTML

h5移動端flexible源碼適配終端解讀以及常用sass函數

his 區分 -c 屏幕渲染 lex prope lse 自定義函數 rgba ;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docE

js移動端左右滑動事件

edt efault nbsp ret rip chm width idt touchend 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>

h5移動端常見虛擬鍵盤頂起底部導航欄解決辦法

底部 size 當前 發生 解決 lse ide cti () 在h5移動端開發中相信很多朋友跟我一樣都會遇到頁面底部導航被虛擬鍵盤頂起的問題，自己在網上找到的解決辦法拿出來與大家分享，有不完美之處還望見諒，有更好的解決辦法可以貼出來大家一起互相學習！！ var

h5移動端聊天室|仿微信界面聊天室|h5多人聊天室

dde ... html5開發 技術 show scrollby anim 世界 info 今年的FIFA世界杯甚是精彩，最近興致高漲就利用HTML5開發了一個手機端仿微信界面聊天室，該h5聊天室采用750px全新伸縮flex布局，以及使用rem響應式配合fontsize

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

css 手機適配 手淘H5移動端適配方案flexible原始碼分析

手淘H5移動端適配方案flexible原始碼分析   移動端適配一直是一個值得探討的問題，在業餘時間我找了一些頁面，查看了一些廠商對於移動端H5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第一個典型的例子，也是我們公司目前普通H5專案正在使用的適配方案。

H5移動端常見問題

解決jquery ajax呼叫遠端介面的跨域問題 首先,介面必須允許遠端呼叫.這是後端或者運維的事情.你必須保證你得到的一個介面是允許遠端呼叫的.否則,就沒啥了. $.ajax({ type:'get', url:url, // 下面的兩行程