国产av一区二区三区传媒,av色图,丰满少妇三级全黄

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 一個(gè)類環(huán)形旋轉(zhuǎn)菜單實(shí)現(xiàn)？

迷茫 2017-06-12 09:26:23

[JavaScript討論組]

1413

舉報(bào)

設(shè)計(jì)圖是這樣的，點(diǎn)擊其中一個(gè)元素，然后會按照那條白色的鏈子弧形移動
，像一個(gè)轉(zhuǎn)盤一樣，請問這樣的話，怎么樣實(shí)現(xiàn)比較簡單快捷，求個(gè)思路。

-------補(bǔ)充-------
移動端的，其實(shí)這一塊就算是一個(gè)整體了，只是線跟圖標(biāo)變化的話其實(shí)難度不大，但是需要的是圖標(biāo)也會跟著移動

迷茫

業(yè)精于勤，荒于嬉;行成于思，毀于隨。

全部回復(fù)(6)

伊謝爾倫2017-06-12 09:28:23 6樓

圖標(biāo)不動圓環(huán)轉(zhuǎn)動可行？

贊 +0

添加回復(fù)

PHP中文網(wǎng)2017-06-12 09:28:23 5樓

整體做一個(gè)超大的塊，視口小，點(diǎn)擊的時(shí)候，超大塊旋轉(zhuǎn)就可以了。這個(gè)超大塊就是圓環(huán) 和小圖標(biāo)做成的一個(gè)整體（或者將圓環(huán)和小圖標(biāo)做成兩個(gè)整體，兩個(gè)塊的寬高和圓環(huán)的設(shè)計(jì)直徑應(yīng)該是一樣的，這樣小圖標(biāo)的大塊旋轉(zhuǎn)的時(shí)候才能無縫和圓環(huán)銜接）

贊 +0

添加回復(fù)

我想大聲告訴你2017-06-12 09:28:23 4樓

幾個(gè)class將元素定位，存儲class名在一個(gè)數(shù)組中，當(dāng)點(diǎn)擊一個(gè)元素，依次切換每個(gè)元素的class，要想要?jiǎng)赢嬓Ч梢栽诿總€(gè)class中添加transition。

這是一個(gè)大概思路，你可以試試。

贊 +0

添加回復(fù)

巴扎黑2017-06-12 09:28:23 3樓

我只能討論一下。。。因?yàn)椴淮_定，

如果用那根鏈子要?jiǎng)?--如果用css或者js動畫，想起來那是一個(gè)很大的元素旋轉(zhuǎn)。。。性能得試了才知道
那就考慮用canvas畫，那就麻煩了呀，我想法大環(huán)不動，計(jì)算環(huán)形中每個(gè)方塊的位置和角度。。不知道有沒有這方面的框架什么的，本身自身的canvas不熟悉，總之，很麻煩。

然后是每個(gè)圖標(biāo)。。這個(gè)用css或者js都行。。關(guān)鍵是涉及事件呀。。canvas元素跟事件怎么聯(lián)系我也沒研究過。。。

這只是一個(gè)菜鳥的想法。。看看其他人的

贊 +0

添加回復(fù)

typecho2017-06-12 09:28:23 2樓

思路：排列條目，計(jì)算偏移值（絕對中點(diǎn)，底部居中），點(diǎn)擊條目獲取索引對應(yīng)的索引，索引比對偏移值，左側(cè)逆時(shí)針，右側(cè)順時(shí)針，每次動畫完成，重排圖標(biāo)順序。

需要注意：

這個(gè)應(yīng)該和無限循環(huán)滾動是一樣的結(jié)構(gòu)，需要 前中后 有三組原始數(shù)據(jù)，這樣才能實(shí)現(xiàn)順時(shí)針和逆時(shí)針都能補(bǔ)全。
為了兼容性，建議動畫僅作為一個(gè)過場使用，即點(diǎn)擊條目時(shí)使用，動畫完成動態(tài)調(diào)整條目的排序，并重繪列表，即每次動畫都是一次數(shù)組排序操作；

技術(shù)實(shí)現(xiàn)方案：

用 css3 實(shí)現(xiàn)，難點(diǎn)在 css3 旋轉(zhuǎn)動畫；
用 canvas 繪制，關(guān)鍵幀原理；
用 svg 制作，原理和 canvas 類似，只是圖形是矢量的；
使用 mp4 視頻，參考 https://www.apple.com/cn/mac-... ；
使用關(guān)鍵幀動畫，較為復(fù)雜；

具體實(shí)現(xiàn)還是比較麻煩的，你可以搜索下相關(guān)的弧形排列插件、css3 動畫等。個(gè)人覺得 canvas 和 svg 比較靠譜。拋磚引玉吧，具體的期待大神。

贊 +0

添加回復(fù)

迷茫2017-06-12 09:28:23 1樓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        .wrap {
            width: 100%;
            height: 100%;
        }

        .wrap {
            position: fixed;
            top: 0;
            left: 0;
        }

        .annulus {
            position: absolute;
            top: -552px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }

        .annulus__bg {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            background: #fff url(YaoMing.jpg) center center no-repeat;
            border: 1px solid #ccc;
            transition: all 0.5s linear;
        }

        .annulus__item {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #fff url(YaoMing.jpg) center center / cover no-repeat;
            border: 1px solid #ccc;
            transition: all 0.5s linear;
        }
    </style>
    <script>
        onload = () => {
            var dataArr = [
                "90|-90", "60|-60", "30|-30", "0|0", "-30|30", "-60|60", "-90|90"
            ], numArr = [
                0, 1, 2, 3, 4, 5, 6
            ], lock = false;
            document.querySelectorAll(".annulus__item").forEach((v, i) => {
                document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                    "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                v.addEventListener("click", function () {
                    if(lock) return false;
                    lock = true;
                    setTimeout(function() { lock = false; }, 500);
                    var content = numArr[3], target = /\d+$/.exec(this.className)[0];
                    if(+content + 1 == target || content - 6 == target) {
                        mainDeg += 30;
                        numArr.push(numArr.shift());
                        document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                        document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";
                        setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);
                    } else if (content - 1 == target || content + 6 == target) {
                        mainDeg -= 30;
                        numArr.unshift(numArr.pop());
                        document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                        document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";
                        setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);
                    }                    
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                });
            });
            var mainDeg = 0;
            onkeydown = (event) => {
                if (event.keyCode === 37) {
                    mainDeg += 30;
                    document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                    numArr.push(numArr.shift());
                    document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";
                    setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                }
                if (event.keyCode === 39) {
                    mainDeg -= 30;
                    document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                    numArr.unshift(numArr.pop());
                    document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";
                    setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                }
            }
        }
    </script>
</head>

<body>
    <p class="wrap">
        <p class="annulus">
            <p class="annulus__bg"></p>
            <p class="annulus__item annulus__item--0"></p>
            <p class="annulus__item annulus__item--1"></p>
            <p class="annulus__item annulus__item--2"></p>
            <p class="annulus__item annulus__item--3"></p>
            <p class="annulus__item annulus__item--4"></p>
            <p class="annulus__item annulus__item--5"></p>
            <p class="annulus__item annulus__item--6"></p>
        </p>
    </p>
</body>

</html>

上代碼,把圖片換一下就可以了
很簡陋,拋磚引玉用

贊 +0

添加回復(fù)

專題推薦

更多>

熱門話題

熱門教程

更多>

相關(guān)教程