ホームページ > 記事 > ウェブフロントエンド > ページ画像切り替えのマウスホイール制御を実装するJavaScriptのサンプルコード
ページ画像切り替えのマウスホイール制御を実装するJavaScriptのサンプルコード
- 黄舟オリジナル
- 2017-10-16 11:10:511535ブラウズ
この記事では、主にマウスホイール制御のページ画像切り替え機能を実現するためのJavaScriptを紹介しており、JavaScriptのイベント応答やページ要素の動的操作関連の実装テクニックを紹介していますので、必要な方は参考にしてください
この記事では、マウスホイールを実現するJavaScriptの例を説明します。コントロールページ画像切り替え機能。参考のために皆さんと共有してください。詳細は次のとおりです。
マウスのスクロール ホイールは良いものですが、なぜこれを言うかというと、ウェブをすばやく閲覧したり、長い記事をすばやく読んだりできるからです。 Web フロントエンドに携わる私たちにとって、このマウス ホイールに注意を払わないわけがありません。では、どうすればユーザーが Web をより快適に閲覧できるようになるでしょうか?
最も一般的なのは、ホイールをスクロールすることで画像を閲覧できるため、ユーザーが次の画像をクリックして面倒な手順を行う必要がなくなります。簡単な例を見てみましょう。
<!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>
<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> ブラウザごとに異なるマウス ホイール イベントがあることに注目してください。端的に言えば、これは主に onmousewheel (IE/Opera/Safari/Chrome) と 2 つのタイプがあります。 DOMMouseScroll(Firefox)、Firefox と互換性を持たせたい場合は、addEventListener を使用してリッスンする必要があります。addEventListener(type,listener,useCapture)、タイプは click、focus... タイプで、リスナーは直接書き込むことができます。 Method function(){ } を使用する場合は、この例のように、記述されたメソッド本体を呼び出すこともできます。 useCapture は true と false のみのブール値で、false が選択されている場合はバブリング メソッドが使用され、true が選択されている場合は Capture メソッドが使用されます。 addEventListenerについては後ほど詳しく説明します。
MouseWheel メソッドでは、e.wheelDelta は IE およびその他のブラウザーと互換性があり、ホイールを回転させるたびに +3/-3 (スクロールアップ/ダウン) を返しますが、e.detail は Firefox ブラウザーと互換性があります。ホイールを回すたびに +120/-120 (上スクロール/下スクロール) が返され、これらの戻り値を使用して上にスクロールするか下にスクロールするかを決定できます。 for ループは画像を順番に非表示にしたり表示したりするだけなので、理解するのは難しくないと思います。
以上がページ画像切り替えのマウスホイール制御を実装するJavaScriptのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。