鼠標(biāo)滾輪事件的應(yīng)用簡單的滾動(dòng)條

　　 　　主容器是用來給里面的東西定位的。內(nèi)容容器是在滾動(dòng)的時(shí)候調(diào)整它的位置以顯示給用戶需要的部分，這個(gè)內(nèi)容容器其實(shí)也可以使用scrollTop來實(shí)現(xiàn)，不過我比較喜歡使用top來實(shí)現(xiàn)。scrollTop的方法的優(yōu)點(diǎn)是會(huì)自動(dòng)計(jì)算滾動(dòng)的上下限，top的方法我也說不出優(yōu)點(diǎn)，也許是以前開發(fā)桌面程序的緣故，總是覺得top比較有實(shí)感。接著是滾動(dòng)條容器和滾動(dòng)條按鈕。滾動(dòng)條容器就是整個(gè)滾動(dòng)條的部分，滾動(dòng)條按鈕就是在滾動(dòng)條容器中可以滑動(dòng)的那個(gè)滑塊。滾動(dòng)條按鈕用a標(biāo)簽來做比較好，因?yàn)閍標(biāo)簽的hover可以兼容低版本瀏覽器，所以用它效果會(huì)更好。 　　接著是CSS的部分 #panel { height:100px;width:200px; overflow:hidden; border:1px solid #CCC; position:relative; } #contents { position:absolute; top:0px;left:0px; font:14px/20px 微軟雅黑; } #scrollbar { width:1px;height:90px; margin:5px; background:#EEE; position:absolute; top:0px;right:0px; } #scrollbtn { position:absolute; width:5px;left:-2px; background:#000; cursor:default; } #scrollbtn:hover {background:#888;} 　　CSS我就不逐行解釋了，看了效果自然會(huì)明白。 　　最后也是最重要的就是JS部分。由于這個(gè)滾動(dòng)條效果是隨手寫的，沒有做的很完善，而且這篇文章主要是想介紹鼠標(biāo)滾輪事件的應(yīng)用，所以對(duì)滾動(dòng)條我只做了鼠標(biāo)滾輪的響應(yīng)。如果需要滾動(dòng)條的，拖動(dòng)、點(diǎn)擊定位，等效果。就自己研究了寫吧，如果真寫不出，就吱個(gè)聲，那樣我下次就再寫一篇文章來說其它的幾個(gè)效果。下面是JS代碼 //判斷瀏覽器 var isIE=navigator.userAgent.match(/MSIE (\d)/i); isIE=isIE?isIE[1]:undefined; var isFF=/FireFox/i.test(navigator.userAgent); //聲明變量 var panel,contents,scrollbar,scrollbtn,panel_h,c_h,s_h; //獲取元素 contents=document.getElementById("contents"), scrollbar=document.getElementById("scrollbar"), scrollbtn=document.getElementById("scrollbtn"); panel=document.getElementById("panel"); //計(jì)算容器高度 //如果這里直接用offsetHeight會(huì)獲取到包含邊框的高度 panel_h=parseInt( isIE<9?panel.currentStyle.height :getComputedStyle(panel).height ); //計(jì)算滾動(dòng)條按鈕的高度 //如果把內(nèi)容容器比作滾動(dòng)條容器 //那么內(nèi)容的可見部分就是滾動(dòng)條按鈕的高度 //而內(nèi)容的可見部分就是總?cè)萜鞯母叨?//所以這里使用總?cè)萜鞲叨瘸詢?nèi)容容器高度 //如果你想做內(nèi)容不足就不出滾動(dòng)條 //你可以在這里判斷高度，不符合就隱藏掉滾動(dòng)條 scrollbtn.style.height=( panel_h/contents.offsetHeight*100 )+"%"; //計(jì)算內(nèi)容可移動(dòng)的大距離 c_h=contents.offsetHeight-panel_h; //計(jì)算滾動(dòng)條可移動(dòng)的大高度 s_h=scrollbar.offsetHeight-scrollbtn.offsetHeight; //創(chuàng)建move方法來移動(dòng)內(nèi)容和滾動(dòng)條 //這個(gè)方法的參數(shù)是鼠標(biāo)滾輪滾動(dòng)的格數(shù) panel.move=function(i){ //計(jì)算內(nèi)容位置 //這里的20是內(nèi)容的行高，當(dāng)然也可以是其它值 //但是使用內(nèi)容的行高對(duì)于用戶來說是最友好的 var top=contents.offsetTop+(20*i); //處理位置上下限，防止?jié)L動(dòng)條溢出 //如果使用scrollTop的方法來做就不需要這個(gè)步驟 if(top>0)top=0; if(top<-c_h)top=-c_h; //移動(dòng)內(nèi)容位置 contents.style.top=top+"px"; //移動(dòng)滾動(dòng)條按鈕位置 //這個(gè)計(jì)算的原理其實(shí)很簡單 //滾動(dòng)條容器和滾動(dòng)條按鈕與內(nèi)容容器和內(nèi)容可見高度是等比例關(guān)系 scrollbtn.style.top=-top/c_h*s_h+"px"; }; //最后是鼠標(biāo)滾輪事件 //這里同時(shí)設(shè)置了DOMMouseScroll和onmousewheel事件 //所以可以全兼容，事件參數(shù)則在事件中再做判斷 //這個(gè)做法的效率不如昨天的完整代碼效率高 //但是鼠標(biāo)滾輪是一個(gè)慢事件，我們可以不要太在乎效率 //至少，這次的代碼比昨天的簡單了好多 panel.addEventListener("DOMMouseScroll", panel.onmousewheel=function(e){ e=e||event; //判斷瀏覽器，并計(jì)算事件參數(shù) var v=isFF?-e.detail/3:e.wheelDelta/120; panel.move(v); isIE<9||e.preventDefault(); return false; } ,false);

好了，注釋已經(jīng)非常詳細(xì)了。注釋中已經(jīng)把滾動(dòng)條的計(jì)算方法說的很清楚了，如果你想實(shí)現(xiàn)滾動(dòng)條的拖動(dòng)，根據(jù)上面說的計(jì)算方法也很容易實(shí)現(xiàn)。如果還有什么不明白的可以提問。 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

本文標(biāo)題：鼠標(biāo)滾輪事件的應(yīng)用簡單的滾動(dòng)條
當(dāng)前地址：http://bm7419.com/news47/322047.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)