js实现用滚动条来放大缩小图片的代码

这段时间比较闲，就搞了这么一个功能来练练手。
因为没有系统的学习过javascript，很多东西都是现学现用。请大家多提宝贵意见，谢谢

<！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>无标题文档</title> <style type="text/css"></style> <script language="javascript" type="text/javascript"> //---------------------------------------------------------------------------------------------- //功能说明：用于放大图片的滚动条，可放大至图片的原始大小。在ie6,ie7,ff1.5下可用 //使用方法：在图片代码里加上resizeable=1，同时在onload事件里加上createResizeScroll函数 //code by: blues[2007-7-17] //---------------------------------------------------------------------------------------------- //始初化变量 var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser; //------------------------------------------------------------------------------------------------ //页面初始化函数 //------------------------------------------------------------------------------------------------ function winInit（）{ //检测浏览器类型 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;} } //------------------------------------------------------------------------------------------------ //加上滚动条 //------------------------------------------------------------------------------------------------ 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"）;//滚动条框 var oFuncLine=document.createElement（"DIV"）;//滚动条背景 var oFuncBut=document.createElement（"P"）;//滚动条本体 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";//给滚动条框加上标志，鼠标移出滚动条框后就要中止 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";}; } } } //------------------------------------------------------------------------------------------------ //准备移动 //------------------------------------------------------------------------------------------------ function readyMoveScrollBut（e）{ oScroll=this; sScrollState="move"; iScrollPos=getPostion（"x",e）;//获取鼠标坐标并保存 this._left=parseInt（this.style.marginLeft）; var img=this._forobj; var oImg=new Image; oImg.src=img.src; //滚动条的移动范围是200像素 //这里计算出宽高的换算比例并保存 img._wbl=（oImg.width-img._width）/200; img._hbl=（oImg.height-img._height）/200; } //------------------------------------------------------------------------------------------------ //完成并清除全局变量 //------------------------------------------------------------------------------------------------ function doneMoveScrollBut（e）{ oScroll=null; sScrollState=null; iScrollPos=0; } //------------------------------------------------------------------------------------------------ //鼠标移动 //------------------------------------------------------------------------------------------------ function moveScrollBut（e）{ //获取事件源 var oEvent=getEvent（e）; if（oScroll！=null && sScrollState=="move"）{ if（oEvent._type=="ScrollX"）{//只有在指定的范围内触发移动 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"; //经过计算得出滚动条的marginLeft值（margin-left的取值范围为[5~205]px） n_x-=5; //将滚动条的位置值换算成宽高值（之前已经计算得到了宽高的换算比例），赋给图片 var img=oScroll._forobj; img.width=n_x*img._wbl+img._width; img.height=n_x*img._hbl+img._height; }else{doneMoveScrollBut（）;} } } //------------------------------------------------------------------------------------------------ //给对象的指定事件加上函数功能 //------------------------------------------------------------------------------------------------ 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）;} }//------------------------------------------------------------------------------------------------ //简写函数 //------------------------------------------------------------------------------------------------ function getById（str）{return document.getElementById（str）;} function getByName（str）{return document.getElementsByName（str）;} function getByTag（str）{return document.getElementsByTagName（str）;} //------------------------------------------------------------------------------------------------ //获取鼠标坐标 //------------------------------------------------------------------------------------------------ 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;} } } //------------------------------------------------------------------------------------------------ //获取事件对象 //------------------------------------------------------------------------------------------------ function getEvent（e）{ if（iBrowser==0）{return event.srcElement;} else{return e.target;} } //------------------------------------------------------------------------------------------------ //加入事件监听 //------------------------------------------------------------------------------------------------ AttachEvent（window,"onload",winInit,false）; AttachEvent（window,"onload",createResizeScroll,false）; AttachEvent（document,"onmousemove",moveScrollBut,false）; AttachEvent（document,"onmouseup",doneMoveScrollBut,false）; </script> </head> <body><img src="http://www.blueshut.com/cj/Bluehills.jpg" height="100" resizeable="1" galleryimg="no" /> <img src="http://www.blueshut.com/cj/Sunset.jpg" width="300" resizeable="1" galleryimg="no" /> <img src="http://www.blueshut.com/cj/Waterlilies.jpg" width="200" resizeable="1" galleryimg="no" /> <img src="http://www.blueshut.com/cj/Winter.jpg" width="100" resizeable="1" galleryimg="no" /></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
另外问大家个问题，像我这样自定义属性的方式行不行的？就是在<img>标签里加上了自定义的 resizeable="1"。在DW里会报警，这样是不是通不过w3c认证的？