js实现用滚动条来放大缩小图片的代码
这段时间比较闲,就搞了这么一个功能来练练手。
因为没有系统的学习过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;i205)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);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
另外问大家个问题,像我这样自定义属性的方式行不行的?就是在<img>标签里加上了自定义的 resizeable="1"。在DW里会报警,这样是不是通不过w3c认证的?