cari

Rumah >hujung hadapan web >tutorial js >Takal kawalan Js gelongsor ke kiri dan kanan contoh_kemahiran javascript

Takal kawalan Js gelongsor ke kiri dan kanan contoh_kemahiran javascript

WBOY
WBOYasal
2016-05-16 16:14:121596semak imbas

Saya membuat sesuatu hari ini Halaman itu pada asalnya mendatar, jadi terdapat bar skrol mendatar di bahagian bawah Apabila ia menegak, tiada bar skrol Sekarang syaratnya ialah roda tetikus harus tatal ke kiri dan kanan. Ini memerlukan penulisan kod js untuk mencapainya. Tulis ini menghadapi banyak masalah

Fungsi yang disokong oleh tiga pelayar iaitu Firefox dan Chrome adalah berbeza sama sekali, ia benar-benar gila.

Berikut adalah beberapa perkara pengetahuan untuk dijelaskan
Pantau acara pulley
iaitu:onmousewheel
firfox:DOMMouseScroll
chrome:roda tetikus
Wah, saya betul-betul buntu
Nilai pulangan tatal juga berbeza
firfox menggunakan perincian untuk mengembalikan -3
Yang lain menggunakan wheelDelta untuk mengembalikan -120
Terdapat nilai pulangan untuk menentukan arah menatal

Terdapat juga penyemak imbas umum selain Chrome yang menggunakan document.documentElement.scrollLeft
untuk menentukan pergerakan kiri halaman. Tetapi pelayar chrome perlu menggunakan document.body.scrollLeft

Kod dikongsi seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<div id="test" style="width:3000px; height:500px; background:#666;"></div>
<script language="javascript">
 
var dbody=document.getElementById('test');
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})
 
//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})
 
//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
e=e || window.event;
var delD=e.wheelDelta&#63;e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0&#63;-50:50;
document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;
 
return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
else oEle.addEventListener(sEventName, fnHandler, false);
}
 
 
</script>
</body>
</html>

Sebenarnya terdapat masalah dengan kod ini Dalam penyemak imbas Chrome, tetikus hanya boleh meluncur apabila tetikus diletakkan di kawasan kelabu Saya tidak menyelesaikan masalah ini, sila tinggalkan mesej dan maklumkan kepada saya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk mencapai kemahiran seret dan lepas effect_javascriptArtikel seterusnya：js untuk mencapai kemahiran seret dan lepas effect_javascript

Artikel berkaitan

Lihat lagi