js實(shí)現(xiàn)用滾動(dòng)條來(lái)放大縮小圖片的代碼

更新時(shí)間：2007年07月17日 00:00:00 作者：

這段時(shí)間比較閑，就搞了這么一個(gè)功能來(lái)練練手。
因?yàn)闆](méi)有系統(tǒng)的學(xué)習(xí)過(guò)javascript，很多東西都是現(xiàn)學(xué)現(xiàn)用。請(qǐng)大家多提寶貴意見(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=gb2312" /> <title>無(wú)標(biāo)題文檔</title> <style type="text/css">  </style> <script language="javascript" type="text/javascript"> //---------------------------------------------------------------------------------------------- //    功能說(shuō)明：用于放大圖片的滾動(dòng)條，可放大至圖片的原始大小。在ie6,ie7,ff1.5下可用 //    使用方法：在圖片代碼里加上resizeable=1，同時(shí)在onload事件里加上createResizeScroll函數(shù) //    code by: blues[2007-7-17] //---------------------------------------------------------------------------------------------- //始初化變量 var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser; //------------------------------------------------------------------------------------------------ //頁(yè)面初始化函數(shù) //------------------------------------------------------------------------------------------------ function winInit(){     //檢測(cè)瀏覽器類(lèi)型     var __Agt = navigator.userAgent.toLowerCase();     var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);     if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);     var _Br=__If[1], _Ver=__If[2];     __Agt=null,__If=null;     if(_Br=="msie"){iBrowser=0;}     else if(_Br=="firefox"){iBrowser=1;}     else{iBrowser=2;} } //------------------------------------------------------------------------------------------------ //加上滾動(dòng)條 //------------------------------------------------------------------------------------------------ function createResizeScroll(){     var objs=getByTag("IMG");     var i,endi=objs.length;     var oFunc;     for(i=0;i<endi;i++){         if(objs[i].getAttribute("resizeable")=="1"){             var oFuncBox=document.createElement("DIV");//滾動(dòng)條框             var oFuncLine=document.createElement("DIV");//滾動(dòng)條背景             var oFuncBut=document.createElement("P");//滾動(dòng)條本體             oFuncBut.style.marginLeft="5px";             oFuncBut._forobj=objs[i];             oFuncBut.onmousedown=readyMoveScrollBut;             oFuncBut.onmouseup=doneMoveScrollBut;             oFuncBox.className="scrollX";             oFuncBox.style.display="none";             oFuncBox.onmouseover=function(){this.style.display='block';};             oFuncBox.onmouseout=function(){this.style.display='none';};             oFuncBox.onselectstart=oFuncLine.onselectstart=oFuncBut.onselectstart=function(){return false;};//防止被選中             oFuncBox._type=oFuncLine._type=oFuncBut._type="ScrollX";//給滾動(dòng)條框加上標(biāo)志，鼠標(biāo)移出滾動(dòng)條框后就要中止             oFuncLine.appendChild(oFuncBut);             oFuncBox.appendChild(oFuncLine);             objs[i].parentNode.insertBefore(oFuncBox,objs[i]);             objs[i]._width=objs[i].width;             objs[i]._height=objs[i].height;             objs[i].onmouseover=function(){this.parentNode.childNodes[0].style.display="block";};             objs[i].onmouseout=function(){this.parentNode.childNodes[0].style.display="none";};         }     } } //------------------------------------------------------------------------------------------------ //準(zhǔn)備移動(dòng) //------------------------------------------------------------------------------------------------ function readyMoveScrollBut(e){     oScroll=this;     sScrollState="move";     iScrollPos=getPostion("x",e);//獲取鼠標(biāo)坐標(biāo)并保存     this._left=parseInt(this.style.marginLeft);     var img=this._forobj;     var oImg=new Image;     oImg.src=img.src;     //滾動(dòng)條的移動(dòng)范圍是200像素     //這里計(jì)算出寬高的換算比例并保存     img._wbl=(oImg.width-img._width)/200;     img._hbl=(oImg.height-img._height)/200; } //------------------------------------------------------------------------------------------------ //完成并清除全局變量 //------------------------------------------------------------------------------------------------ function doneMoveScrollBut(e){     oScroll=null;     sScrollState=null;     iScrollPos=0; } //------------------------------------------------------------------------------------------------ //鼠標(biāo)移動(dòng) //------------------------------------------------------------------------------------------------ function moveScrollBut(e){     //獲取事件源     var oEvent=getEvent(e);     if(oScroll!=null && sScrollState=="move"){         if(oEvent._type=="ScrollX"){//只有在指定的范圍內(nèi)觸發(fā)移動(dòng)             var n_x=getPostion("x",e);             n_x-=iScrollPos;             n_x+=oScroll._left;             if(n_x<5)n_x=5;             if(n_x>205)n_x=205;             oScroll.style.marginLeft=n_x+"px";             //經(jīng)過(guò)計(jì)算得出滾動(dòng)條的marginLeft值（margin-left的取值范圍為[5~205]px）             n_x-=5;             //將滾動(dòng)條的位置值換算成寬高值（之前已經(jīng)計(jì)算得到了寬高的換算比例），賦給圖片             var img=oScroll._forobj;             img.width=n_x*img._wbl+img._width;             img.height=n_x*img._hbl+img._height;         }else{doneMoveScrollBut();}     } } //------------------------------------------------------------------------------------------------ //給對(duì)象的指定事件加上函數(shù)功能 //------------------------------------------------------------------------------------------------ function AttachEvent(object,eventName,func,cancelBubble){     var cb=cancelBubble?true:false;     eventName=eventName.toLowerCase();     if(document.attachEvent){object.attachEvent(eventName,func);}     else{object.addEventListener(eventName.substr(2),func,cb);} }    //------------------------------------------------------------------------------------------------ //簡(jiǎn)寫(xiě)函數(shù) //------------------------------------------------------------------------------------------------ function getById(str){return document.getElementById(str);} function getByName(str){return document.getElementsByName(str);} function getByTag(str){return document.getElementsByTagName(str);} //------------------------------------------------------------------------------------------------ //獲取鼠標(biāo)坐標(biāo) //------------------------------------------------------------------------------------------------ function getPostion(XorY,e){     if(iBrowser==0){         if(XorY=="x"){return event.x;}         else if(XorY=="y"){return event.y;}         else{return false;}     }     else{         if(XorY=="x"){return e.pageX;}         else if(XorY=="y"){return e.pageY;}         else{return false;}     } } //------------------------------------------------------------------------------------------------ //獲取事件對(duì)象 //------------------------------------------------------------------------------------------------ function getEvent(e){     if(iBrowser==0){return event.srcElement;}     else{return e.target;} } //------------------------------------------------------------------------------------------------ //加入事件監(jiān)聽(tīng) //------------------------------------------------------------------------------------------------ AttachEvent(window,"onload",winInit,false); AttachEvent(window,"onload",createResizeScroll,false); AttachEvent(document,"onmousemove",moveScrollBut,false); AttachEvent(document,"onmouseup",doneMoveScrollBut,false); </script> </head> <body> <div style="margin:10px 0 0 40px;padding:10px 0;">     <div   id="d2gfgdo"   class="img"><img src="http://www.blueshut.com/cj/Bluehills.jpg" height="100" resizeable="1" galleryimg="no" /></div>     <div   id="tvg72kk"   class="img"><img src="http://www.blueshut.com/cj/Sunset.jpg" width="300" resizeable="1" galleryimg="no" /></div>     <div   id="zhgqszq"   class="img"><img src="http://www.blueshut.com/cj/Waterlilies.jpg" width="200" resizeable="1" galleryimg="no" /></div>     <div   id="maxwzan"   class="img"><img src="http://www.blueshut.com/cj/Winter.jpg" width="100" resizeable="1" galleryimg="no" /></div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

另外問(wèn)大家個(gè)問(wèn)題，像我這樣自定義屬性的方式行不行的？就是在<img>標(biāo)簽里加上了自定義的 resizeable="1"。在DW里會(huì)報(bào)警，這樣是不是通不過(guò)w3c認(rèn)證的？

您可能感興趣的文章: