hujung hadapan web
tutorial js
js acara onmousewheel mencetuskan beberapa kali kemahiran solution_javascript masalah
js acara onmousewheel mencetuskan beberapa kali kemahiran solution_javascript masalah
Saya ingin membuat kesan pensuisan yang lancar dengan melancarkan roda tetikus antara skrin pertama dan skrin kedua Saya menghadapi banyak masalah Kemudian, dengan bantuan kk, saya akhirnya menyelesaikan masalah itu Saya merakamnya satu klik:
Kod awal saya kelihatan seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
div {
width: 700px;
height: 1000px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
</body>
<script src="../jQuery/jquery.min.js"></script>
<script src="test.js"></script>
</html>
$(document).ready(function(){
var height = $(window).height(); //获取浏览器窗口当前可见区域的大小
//鼠标滚动之后整屏切换
var scrollFunc = function(e){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ //不同浏览器向下滚动
$(document.body).animate({scrollTop:height}, "fast");
$(document.documentElement).animate({scrollTop:height}, "fast");
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){ //不同浏览器向上滚动
$(document.body).animate({scrollTop:0}, "fast");
$(document.documentElement).animate({scrollTop:0}, "fast");
}
};
//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
});
Saya menguji kod ini biasanya di bawah IE dan Firefox, tetapi di bawah Google acara onmousewheel sentiasa mencetuskan beberapa kali Ini adalah perkara yang sangat menjengkelkan. Mengapakah ia mencetuskan beberapa kali? Selepas penyahpepijatan, saya mendapati bahawa setiap kali kami menatal tetikus, kami menatal dengan sangat "kejam" dengan jumlah yang besar sekali gus, bukannya menatal perlahan dalam petak kecil, yang membawa kepada beberapa kali apabila menatal Mencetuskan acara onmousewheel dan memanggil scrollFunc fungsi. Apabila fungsi animasi dalam fungsi belum dilaksanakan, ia masih dipanggil secara berterusan Dengan cara ini, akan berlaku situasi di mana bar skrol tidak boleh ditatal ke bawah selepas menatal beberapa kali dan halaman tidak boleh ditatal ke atas. Jadi, saya menukar kod js di atas kepada yang berikut:
$(document).ready(function(){
var height = $(window).height();
var scrollFunc = function(e){
document.onmousewheel = undefined;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){
$(document.body).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
$(document.body).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}
};
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
document.onmousewheel = scrollFunc;
});
Baiklah, kini kod boleh berjalan seperti biasa, tetapi kerana saya seorang pemula, kod itu tidak cukup diperhalusi, dan kk menyatakannya sekali lagi di bawah gesaannya, saya mengemas kini beberapa pengubahsuaian:
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var body;
if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
body = document.documentElement;
}else{
body = document.body;
}
var isFinish = true;
var scrollFunc = function(e){
if(isFinish){
var scrollTop = body.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){
scroll(height);
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
scroll(0);
}
}
};
var scroll = function(height){
isFinish = false;
$(body).animate({scrollTop:height},"fast","linear",function(){
isFinish = true;
});
};
if(navigator.userAgent.indexOf("Firefox")>0){
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
}else{
document.onmousewheel = scrollFunc;
}
});Saya akhirnya mendapat kod untuk pengenalan. Saya perlu mengatakan bahawa saya belajar banyak dengan menyelesaikan masalah ini. Saya akan bekerja lebih keras ke arah matlamat "kurangkan menulis, buat lebih banyak" pada masa hadapan! ! !
Jika ada apa-apa yang salah dengan apa yang saya tulis, anda dialu-alukan untuk memberi saya nasihat saya akan belajar daripadanya dengan fikiran terbuka.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
![ID Peristiwa 4660: Objek dipadamkan [Betulkan]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
ID Peristiwa 4660: Objek dipadamkan [Betulkan]
Jul 03, 2023 am 08:13 AM
Sesetengah pembaca kami menemui ID4660 acara. Mereka sering tidak pasti apa yang perlu dilakukan, jadi kami menerangkannya dalam panduan ini. ID Peristiwa 4660 biasanya dilog apabila objek dipadamkan, jadi kami juga akan meneroka beberapa cara praktikal untuk membetulkannya pada komputer anda. Apakah acara ID4660? ID Peristiwa 4660 berkaitan dengan objek dalam Direktori Aktif dan akan dicetuskan oleh mana-mana faktor berikut: Pemadaman Objek – Peristiwa keselamatan dengan ID Peristiwa 4660 direkodkan apabila objek dipadamkan daripada Direktori Aktif. Perubahan manual – ID Peristiwa 4660 mungkin dijana apabila pengguna atau pentadbir menukar kebenaran objek secara manual. Ini boleh berlaku apabila menukar tetapan kebenaran, mengubah suai tahap akses atau menambah atau mengalih keluar orang atau kumpulan
Dapatkan acara kalendar akan datang pada skrin kunci iPhone anda
Dec 01, 2023 pm 02:21 PM
Pada iPhone yang menjalankan iOS 16 atau lebih baru, anda boleh memaparkan acara kalendar akan datang terus pada skrin kunci. Baca terus untuk mengetahui cara ia dilakukan. Terima kasih kepada komplikasi muka jam tangan, ramai pengguna Apple Watch sudah terbiasa melihat pergelangan tangan mereka untuk melihat acara kalendar yang akan datang. Dengan kemunculan iOS16 dan widget skrin kunci, anda boleh melihat maklumat acara kalendar yang sama terus pada iPhone anda tanpa membuka kunci peranti. Widget Skrin Kunci Kalendar datang dalam dua perisa, membolehkan anda menjejaki masa acara akan datang yang seterusnya, atau menggunakan widget yang lebih besar yang memaparkan nama acara dan masanya. Untuk mula menambah widget, buka kunci iPhone anda menggunakan Face ID atau Touch ID, tekan dan tahan
Dalam JavaScript, apakah tujuan acara 'oninput'?
Aug 26, 2023 pm 03:17 PM
Apabila nilai ditambah pada kotak input, peristiwa oninput berlaku. Anda boleh cuba menjalankan kod berikut untuk memahami cara melaksanakan acara oninput dalam JavaScript - Contoh<!DOCTYPEhtml><html> <body> <p>Tulis di bawah:</p> <inputtype="text"
Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP?
Nov 02, 2023 pm 12:48 PM
Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP? Fungsi kalendar dan peringatan acara adalah salah satu keperluan biasa semasa membangunkan aplikasi web. Sama ada pengurusan jadual peribadi, kerjasama pasukan atau penjadualan acara dalam talian, fungsi kalendar boleh menyediakan pengurusan masa dan pengaturan transaksi yang mudah. Melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP boleh diselesaikan melalui langkah berikut. Reka bentuk pangkalan data Pertama, anda perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat tentang acara kalendar. Reka bentuk ringkas boleh mengandungi medan berikut: id: unik untuk acara tersebut
Bagaimana untuk melaksanakan pengikatan peristiwa perubahan bagi elemen terpilih dalam jQuery
Feb 23, 2024 pm 01:12 PM
jQuery ialah perpustakaan JavaScript popular yang boleh digunakan untuk memudahkan manipulasi DOM, pengendalian acara, kesan animasi, dll. Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu menukar pengikatan acara pada elemen terpilih. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengikat acara perubahan elemen terpilih, dan memberikan contoh kod khusus. Pertama, kita perlu mencipta menu lungsur dengan pilihan menggunakan label:
Penjelasan terperinci tentang peristiwa mengikat kotak input dalam dokumen Vue
Jun 21, 2023 am 08:12 AM
Vue.js ialah rangka kerja JavaScript ringan yang mudah digunakan, cekap dan fleksibel Ia merupakan salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Dalam Vue.js, peristiwa mengikat kotak input adalah keperluan yang sangat biasa Artikel ini akan memperkenalkan peristiwa mengikat kotak input dalam dokumen Vue secara terperinci. 1. Konsep asas Dalam Vue.js, peristiwa pengikatan kotak input merujuk kepada pengikatan nilai kotak input kepada objek data bagi contoh Vue, dengan itu mencapai pengikatan dua hala input dan respons. Dalam Vue.j
Apakah peristiwa yang biasa digunakan dalam jquery
Jan 03, 2023 pm 06:13 PM
Peristiwa yang biasa digunakan dalam jquery ialah: 1. Peristiwa tetingkap; 2. Peristiwa tetikus, yang merupakan peristiwa yang dijana apabila pengguna menggerakkan atau mengklik tetikus pada dokumen, termasuk klik tetikus, peristiwa pindah masuk, peristiwa pindah keluar, dsb.; 3. Acara papan kekunci, Peristiwa dijana setiap kali pengguna menekan atau melepaskan kekunci pada papan kekunci, termasuk peristiwa penekan kekunci, peristiwa pelepasan kekunci, dsb. peristiwa akan dicetuskan, dan apabila ia kehilangan fokus, peristiwa blur() dicetuskan dan peristiwa submit() dicetuskan apabila borang diserahkan.
Menyelam Dalam Acara Butang Tutup dalam jQuery
Feb 24, 2024 pm 05:09 PM
Pemahaman mendalam tentang peristiwa butang tutup dalam jQuery Semasa proses pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu melaksanakan fungsi butang tutup, seperti menutup tetingkap pop timbul, menutup kotak gesaan, dsb. Apabila menggunakan jQuery, perpustakaan JavaScript yang popular, ia menjadi sangat mudah dan mudah untuk melaksanakan acara butang tutup. Artikel ini akan menyelidiki cara menggunakan jQuery untuk melaksanakan acara butang tutup, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menguasai teknologi ini dengan lebih baik. Pertama, kita perlu memahami bagaimana untuk menentukan
