Rumah > Soal Jawab > teks badan
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">地图监控</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>
代言2017-06-12 09:34:56
试试这样
Poke me=>addEventListener
containers[i].addEventListener('mouseover', press, true);
containers[i].addEventListener('mouseout', pressout, true);
阿神2017-06-12 09:34:56
Pertama sekali, terdapat masalah dengan kod anda Apabila tetikus diletakkan pada a, animasi tidak dicetuskan hanya apabila tetikus diletakkan pada kanvas
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
Saya rasa jika anda hanya mahu memantau kemasukan dan penyingkiran tetikus, anda harus menggunakan acara mouseenter dan mouseleave, lihat di sini
世界只因有你2017-06-12 09:34:56
Terima kasih atas bantuan anda, saya beralih kepada CSS untuk merealisasikan kesan ini.