masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
javascript - Pelaksanaan menu berputar pekeliling kelas?
迷茫
迷茫 2017-06-12 09:26:23
0
6
1029

Gambar reka bentuk adalah seperti ini Klik pada salah satu elemen, dan kemudian ia akan bergerak dalam lengkok di sepanjang rantai putih, seperti meja putar, bagaimana ia boleh dilaksanakan dengan lebih mudah dan cepat idea.

-------Supplement-------

Untuk versi mudah alih, sebenarnya, sekeping ini dianggap sebagai satu keseluruhan Tidak sukar jika garis dan ikon berubah, tetapi yang diperlukan ialah ikon juga akan bergerak dengan sewajarnya

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

membalas semua(6)
伊谢尔伦
伊谢尔伦2017-06-12 09:28:23 Tingkat 6

图标不动 圆环转动 可行？

Suka +0
Tambah Balasan
洪涛
洪涛2017-06-12 09:28:23 Tingkat 5

Secara keseluruhan, buat bongkah super besar dengan port pandangan kecil Apabila diklik, blok super boleh diputar. Bongkah super besar ini ialah keseluruhan yang diperbuat daripada cincin dan ikon kecil (atau cincin dan ikon kecil dijadikan dua keseluruhan. Lebar dan tinggi kedua-dua blok dan diameter reka bentuk cincin itu hendaklah sama, jadi bahawa saiz ikon kecil adalah Hanya apabila blok berputar boleh ia bersambung dengan lancar dengan cincin)

Suka +0
Tambah Balasan
我想大声告诉你
我想大声告诉你2017-06-12 09:28:23 Tingkat 4

Beberapa elemen meletakkan kelas dan menyimpan nama kelas dalam tatasusunan Apabila elemen diklik, kelas setiap elemen ditukar secara bergilir Jika anda mahukan kesan animasi, anda boleh menambah transition pada setiap kelas.

Ini adalah idea umum, anda boleh mencubanya.

Suka +0
Tambah Balasan
巴扎黑
巴扎黑2017-06-12 09:28:23 Tingkat 3

Saya hanya boleh membincangkannya. . . Kerana saya tidak pasti,

Jika anda menggunakan rantai itu untuk bergerak---jika anda menggunakan animasi css atau js, fikirkan, ia adalah satu putaran elemen yang besar. . . Anda perlu mencubanya untuk mengetahui prestasinya. Kemudian pertimbangkan untuk menggunakan kanvas untuk melukis, yang akan menyusahkan saya mahu memastikan cincin besar tidak bergerak dan mengira kedudukan dan sudut setiap petak di dalam gelanggang. . Saya tidak tahu sama ada terdapat sebarang rangka kerja untuk ini, dan saya tidak biasa dengan kanvas saya sendiri Secara ringkasnya, ia sangat menyusahkan.

Kemudian setiap ikon. . Anda boleh menggunakan css atau js untuk ini. . Kuncinya ialah ia melibatkan peristiwa. . Saya belum mengkaji bagaimana elemen kanvas berkaitan dengan peristiwa. . .

Ini hanyalah idea baru. . Semak orang lain

Suka +0
Tambah Balasan
typecho
typecho2017-06-12 09:28:23 Tingkat 2

Idea: susun item, kira nilai offset (titik tengah mutlak, tengah bawah), klik pada item untuk mendapatkan indeks yang sepadan dengan indeks, bandingkan indeks dengan nilai offset, lawan jam di sebelah kiri, mengikut arah jam di sebelah kanan, setiap kali animasi selesai, ulangi Susun susunan ikon.

Nota:

  • Ini sepatutnya mempunyai struktur yang sama seperti tatal gelung tak terhingga. Ia memerlukan depan, tengah dan belakang untuk mempunyai tiga set data asal, supaya ia boleh dilengkapkan mengikut arah jam dan lawan jam.

  • Demi keserasian, adalah disyorkan bahawa animasi hanya digunakan sebagai peralihan, iaitu, apabila item diklik, animasi selesai untuk melaraskan pengisihan item secara dinamik dan melukis semula senarai, iaitu, setiap animasi ialah operasi pengisihan tatasusunan

Pelan pelaksanaan teknikal:

  • Gunakan css3 untuk melaksanakan, kesukarannya terletak pada animasi putaran css3

  • Melukis dengan kanvas, prinsip bingkai kunci;

  • Dibuat dengan svg, prinsipnya serupa dengan kanvas, kecuali grafik adalah vektor;

  • Gunakan video mp4, rujuk https://www.apple.com/cn/mac-... ;

  • Gunakan animasi bingkai kunci, yang lebih rumit

Pelaksanaan khusus masih menyusahkan Anda boleh mencari pemalam susunan arka yang berkaitan, animasi css3, dsb. Secara peribadi, saya fikir kanvas dan svg lebih dipercayai. Hanya lemparkan beberapa idea dan nantikan tuannya.

Suka +0
Tambah Balasan
迷茫
迷茫2017-06-12 09:28:23 Tingkat 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>

Muat naik kod dan tukar gambar dan selesai
Ia sangat mudah, hanya untuk rujukan

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan