recherche

Maison  >  Article  >  interface Web  >  Poulie de contrôle Js glissant à gauche et à droite, compétences example_javascript

Poulie de contrôle Js glissant à gauche et à droite, compétences example_javascript

WBOY
WBOYoriginal
2016-05-16 16:14:121571parcourir

J'ai fait quelque chose aujourd'hui. La page était à l'origine horizontale, donc il y avait une barre de défilement horizontale en bas. Lorsqu'elle était verticale, il n'y avait pas de barre de défilement. Maintenant, l'exigence est que la molette de la souris défile vers la gauche et la droite. Cela nécessite d'écrire du code js pour y parvenir. Écrire cela a rencontré beaucoup de problèmes

Les fonctions supportées par les trois navigateurs à savoir Firefox et Chrome sont complètement différentes, c'est vraiment dingue.

Voici quelques points de connaissances à expliquer
Surveiller les événements de poulie
c'est-à-dire : sur la molette de la souris
firfox : DOMMouseScroll
chrome :molette de la souris
Wow, je suis vraiment sans voix
La valeur de retour du défilement est également différente
Firefox utilise les détails pour renvoyer -3
D'autres utilisent wheelDelta pour renvoyer -120
Il existe une valeur de retour pour déterminer le sens de défilement

Il existe également des navigateurs généraux sauf Chrome qui utilisent document.documentElement.scrollLeft
pour déterminer le mouvement vers la gauche de la page. Mais le navigateur Chrome doit utiliser document.body.scrollLeft

Le code est partagé comme suit : 

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

Il y a effectivement un problème avec ce code. Dans le navigateur Chrome, la souris ne peut glisser que lorsque la souris est placée dans la zone grise. Je n'ai pas résolu ce problème. Si un expert le résout, veuillez laisser un message et. faites le moi savoir. Merci.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js pour acquérir des compétences de glisser-déposer effect_javascriptArticle suivant：js pour acquérir des compétences de glisser-déposer effect_javascript

Articles Liés

Voir plus