suchen

Heim >Web-Frontend >js-Tutorial >Js-Steuerrolle, die nach links und rechts gleitet. Beispiel: Javascript-Kenntnisse

Js-Steuerrolle, die nach links und rechts gleitet. Beispiel: Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:14:121596Durchsuche

Ich habe heute etwas gemacht, daher gab es unten eine horizontale Bildlaufleiste. Jetzt musste das Mausrad nach links und rechts scrollen. Dies erfordert das Schreiben von JS-Code, um dies zu erreichen. Beim Schreiben sind große Probleme aufgetreten

Die von den drei Browsern Firefox und Chrome unterstützten Funktionen sind völlig unterschiedlich, es ist wirklich verrückt.

Hier ein paar Wissenspunkte zur Erläuterung
Überwachen Sie Riemenscheibenereignisse
dh:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
Wow, ich bin wirklich sprachlos
Auch der Rückgabewert beim Scrollen ist unterschiedlich
firfox verwendet Details, um -3
zurückzugeben Andere verwenden WheelDelta, um -120
zurückzugeben Es gibt einen Rückgabewert, um die Scrollrichtung zu bestimmen

Außer Chrome gibt es auch allgemeine Browser, die document.documentElement.scrollLeft
verwenden, um die Linksbewegung der Seite zu bestimmen. Der Chrome-Browser muss jedoch document.body.scrollLeft

verwenden

Der Code wird wie folgt geteilt: 

<!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>

Es gibt tatsächlich ein Problem mit diesem Code. Die Maus kann nur dann verschoben werden, wenn sie im grauen Bereich platziert ist. Wenn ein Experte es löst, hinterlassen Sie bitte eine Nachricht Lass es mich wissen. Danke.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js, um Drag-and-Drop-Effekt_Javascript-Fähigkeiten zu erlangenNächster Artikel：js, um Drag-and-Drop-Effekt_Javascript-Fähigkeiten zu erlangen

In Verbindung stehende Artikel

Mehr sehen