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

javascript - Masalah menggelegak acara JS
學習ing
學習ing 2017-06-12 09:32:56
0
3
910

Kes ditutup: Gunakan CSS untuk mencapai kesan ini.

Terima kasih atas bantuan anda, saya beralih kepada CSS untuk merealisasikan kesan ini.

1 Dalam kod berikut, saya mendengar peristiwa alih tetikus dan tetikus pada teg untuk mencetuskan animasi kanvas Acara menggelegak telah dihalang dalam panggilan balik alih tetikus dan tetikus, tetapi ia masih dicetuskan apabila tetikus dialihkan ke. dua rentang di dalam a. Keluar tetikus a telah dicetuskan, dan alih tetikus dicetuskan semula apabila kembali ke a, menyebabkan animasi terganggu dan dilaksanakan berulang kali.

Sila bantu saya melihat apa yang salah dengan kod berikut?

Menambah gambar animasi!

<a href="/map.html" class="material-block top-border-54c889" data-color="#54c889">
    <span class="menu-index-svg"><svg class="icon" width="32px" height="32px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg></span>
    <span class="menu-index-text">地圖監(jiān)控</span>
    <canvas style="width: 100%; height: 100%;" width="160" height="90"></canvas>
</a>

<script>
var canvas = {},
    centerX = 0,
    centerY = 0,
    color = '',
    containers = document.getElementsByClassName('material-block'),
    context = {},
    element = {},
    radius = 0

    requestAnimFrame = function () {
        return (
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }(),

    init = function () {
        containers = Array.prototype.slice.call(containers);
        for (var i = 0; i < containers.length; i += 1) {
            canvas = document.createElement('canvas');
            console.log(containers[i]);
            containers[i].addEventListener('mouseover', press, false);
            containers[i].addEventListener('mouseout', pressout, false);
            containers[i].appendChild(canvas);
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
    },

    press = function (event) {
        console.log('press');
        color = event.toElement.parentElement.dataset.color;
        element = event.toElement;
        context = element.getContext('2d');
        radius = 0;
        centerX = 0;
        centerY = 0;
        context.clearRect(0, 0, element.width, element.height);
        draw();
        event.stopPropagation();
    },

    pressout = function (event) {
        console.log('pressout');
        event.stopPropagation();
    },

    draw = function () {
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        radius += 15;
        if (radius < element.width + 100) {
            requestAnimFrame(draw);
        }
    };

init();
</script>
學習ing
學習ing

membalas semua(3)
代言

試試這樣
Poke me=>addEventListener

containers[i].addEventListener('mouseover', press, true);
containers[i].addEventListener('mouseout', pressout, true);
阿神
  1. Pertama sekali, terdapat masalah dengan kod anda Apabila tetikus diletakkan pada a, animasi tidak dicetuskan hanya apabila tetikus diletakkan pada kanvas

  2. Kedua, penangkapan peristiwa tidak boleh dihalang, dan menggelegak peristiwa adalah daripada elemen anak kepada elemen induk, jadi objek aplikasi stopPropagation() harus menjadi elemen anak dalam a

  3. Saya rasa jika anda hanya mahu memantau kemasukan dan penyingkiran tetikus, anda harus menggunakan acara mouseenter dan mouseleave, lihat di sini

世界只因有你

Terima kasih atas bantuan anda, saya beralih kepada CSS untuk merealisasikan kesan ini.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan