ホームページ >ウェブフロントエンド >jsチュートリアル >マウスホイール制御ページ画像切り替え機能のJavaScript実装例
マウスホイール制御ページ画像切り替え機能のJavaScript実装例
- 韦小宝オリジナル
- 2018-01-12 09:55:021926ブラウズ
この記事では主に、マウス ホイール コントロールのページ画像切り替え機能を実装するための JavaScript を紹介します。これには、 JavaScript イベント 応答と、ページ要素の動的な操作に関連する実装テクニックが含まれます。この記事では、JavaScript がマウス ホイール コントロールのページ画像切り替え機能を実装する例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。
マウスのスクロール ホイールは良いものですが、なぜこれを言うかというと、ウェブをすばやく閲覧したり、長い記事をすばやく読んだりできるからです。 Web フロントエンドに携わる私たちにとって、このマウス ホイールに注意を払わないわけがありません。では、どうすればユーザーが Web をより快適に閲覧できるようになるでしょうか?
最も一般的なのは、ホイールをスクロールすることで画像を閲覧できるため、ユーザーが次の画像をクリックして面倒な手順を行う必要がなくなります。簡単な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标通过滚动滚轮切换图片</title>
<style>
#picBox{
width:800px;height:600px;
margin:70px auto;
}
</style>
<script>
var nowPic=1;
function MouseWheel(e){
var pic;
e=e||window.event;
for(i=1;i<4;i++){
if(i==nowPic){
if(e.wheelDelta){//IE
pic=document.getElementById("pic"+i);
pic.style.display="block";
}else if(e.detail){//Firefox
pic=document.getElementById("pic"+i);
pic.style.display="block";
}
}else{
pic=document.getElementById("pic"+i);
pic.style.display="none";
}
}
if(nowPic>=3){
nowPic=1;
}else{
nowPic++;
}
}
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",MouseWheel,false);
}
window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script>
</head>
<body>
<h3 align="center">鼠标通过滚动滚轮切换图片</h3>
<p id="picBox">
<img src="http://picm.bbzhi.com/dongwubizhi/dongwuheji/dongwuheji_69803_m.jpg" width="800px" height="600px" id="pic1">
<span style="white-space:pre"> </span><img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;">
<span style="white-space:pre"> </span><img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20121221/002564a60ce4123e17614e.jpg" width="800px" height="600px" id="pic3" style="display:none;">
</p>
</body>
</html>js コードに注目してください。ブラウザごとに異なるマウスホイールイベントがあります。端的に言えば、onmousewheel (IE/Opera/Safari/Chrome) と DOMMouseScroll (Firefox) の 2 種類があります。 Firefox と互換性を持たせたい場合は、addEventListener を使用してリッスンする必要があります。この関数には addEventListener(type、listener、useCapture) という 3 つのパラメータがあり、type は click、focus... タイプで、リスナーは直接書き込むことができます。 Method function(){}, この例のように、記述されたメソッド本体を呼び出すこともできます。 useCapture は true と false のみのブール値で、false が選択されている場合はバブリング メソッドが使用され、true が選択されている場合は Capture メソッドが使用されます。 addEventListenerについては後ほど詳しく説明します。
MouseWheel メソッドでは、e.wheelDelta は IE およびその他のブラウザーと互換性があり、ホイールを回転させるたびに +3/-3 (スクロールアップ/ダウン) を返しますが、e.detail は Firefox ブラウザーと互換性があります。ホイールを回すたびに +120/-120 (上スクロール/下スクロール) が返され、これらの戻り値を使用して上にスクロールするか下にスクロールするかを決定できます。
forループは画像を順番に非表示にしたり表示したりするだけなので、理解するのは難しくないと思います。 関連する推奨事項:
JSで実装された簡単なフォーム検証関数の例JSで表示コンテンツのクリックサイクル切り替えを実装する方法jsプッシュボックスミニゲーム実装チュートリアル以上がマウスホイール制御ページ画像切り替え機能のJavaScript実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。