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

来源：动视网责编：小采时间：2020-11-27 20:37:33

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

js实现用滚动条来放大缩小图片的代码_图象特效:这段时间比较闲，就搞了这么一个功能来练练手。因为没有系统的学习过javascript，很多东西都是现学现用。请大家多提宝贵意见，谢谢无标题文档 //----------------------------------------------------------------

推荐度：

点击下载本文 文档为doc格式

导读js实现用滚动条来放大缩小图片的代码_图象特效:这段时间比较闲，就搞了这么一个功能来练练手。因为没有系统的学习过javascript，很多东西都是现学现用。请大家多提宝贵意见，谢谢无标题文档 //----------------------------------------------------------------

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

<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> 
 
//---------------------------------------------------------------------------------------------- 
// 功能说明：用于放大图片的滚动条，可放大至图片的原始大小。在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需刷新才能执行]
另外问大家个问题，像我这样自定义属性的方式行不行的？就是在标签里加上了自定义的 resizeable="1"。在DW里会报警，这样是不是通不过w3c认证的？

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

推荐度：

点击下载本文 文档为doc格式

标签：特效 js 代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐