JavaScript完成鼠標(biāo)滾輪控制頁(yè)面圖片切換
發(fā)表時(shí)間：2024-05-05 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]鼠標(biāo)上的滾輪是一個(gè)不錯(cuò)的東東，為什么這么說(shuō)，因?yàn)樗軒椭覀兛焖俚臑g覽網(wǎng)頁(yè),快速的進(jìn)行長(zhǎng)篇文章的閱讀。對(duì)于web前端的我們來(lái)說(shuō)又怎么能不注重這個(gè)鼠標(biāo)滾輪呢，那么它能如何讓用戶更好的瀏覽網(wǎng)頁(yè)呢？本文主要介紹JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能,涉及javascript事件響應(yīng)及頁(yè)面元...
鼠標(biāo)上的滾輪是一個(gè)不錯(cuò)的東東，為什么這么說(shuō)，因?yàn)樗軒椭覀兛焖俚臑g覽網(wǎng)頁(yè),快速的進(jìn)行長(zhǎng)篇文章的閱讀。對(duì)于web前端的我們來(lái)說(shuō)又怎么能不注重這個(gè)鼠標(biāo)滾輪呢，那么它能如何讓用戶更好的瀏覽網(wǎng)頁(yè)呢？本文主要介紹JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下，希望能幫助到大家。
最常見(jiàn)就是圖片的切換了，能通過(guò)滾動(dòng)滾輪進(jìn)行圖片的瀏覽，省得用戶還要去點(diǎn)下一張，做這種繁瑣的步驟。來(lái)看個(gè)簡(jiǎn)單的例子吧。
<!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>鼠標(biāo)通過(guò)滾動(dòng)滾輪切換圖片</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注冊(cè)事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",MouseWheel,false);
}
window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script>
</head>
<body>
<h3 align="center">鼠標(biāo)通過(guò)滾動(dòng)滾輪切換圖片</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>重點(diǎn)講解下js代碼，不同的瀏覽器鼠標(biāo)滾輪事件也不一樣，說(shuō)白點(diǎn)就是兼容性問(wèn)題，主要是有兩種，onmousewheel(IE/Opera/Safari/Chrome)和DOMMouseScroll(Firefox)，如果想兼容firefox，應(yīng)采用addEventListener監(jiān)聽(tīng)，這個(gè)函數(shù)有3個(gè)參數(shù)，addEventListener(type,listener,useCapture)，type就是click,focus......類型，而listener可以直接寫方法function(){}，也可以調(diào)用寫好的方法體，如我的例子。useCapture是一個(gè)布爾值，只有true和false，表示該事件的響應(yīng)順序，選false則采用bubbing(冒泡)方式，選項(xiàng)true采用Capture方式。對(duì)于addEventListener以后會(huì)出一個(gè)詳解。
在MouseWheel方法中e.wheelDelta兼容IE等其它瀏覽器，每當(dāng)滾動(dòng)一次滾輪會(huì)返回+3/-3（上滾/下滾），而e.detail兼容Firefox瀏覽器，每當(dāng)滾動(dòng)一次滾輪會(huì)返回+120/-120（上滾/下滾），通過(guò)這些返回的值可以做出是向上還是向下滾動(dòng)的判斷。而for循環(huán)只是讓圖片有順序的隱藏和顯示，相信這個(gè)不難看懂。
文中錯(cuò)誤與疏漏之處歡迎大家指正。
相關(guān)推薦：
js控制頁(yè)面字體大小的問(wèn)題_html/css_WEB-ITnose
jQuery學(xué)習(xí)筆記之控制頁(yè)面實(shí)現(xiàn)代碼_jquery
js 控制頁(yè)面跳轉(zhuǎn)的5種方法_javascript技巧
以上就是JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
