js使用滚动条放大、缩小图片的代码
发布时间：2015-02-18 编辑：jiaochengji.com
本文分享一例js代码，使用页面中的滚动条来实现图片的放大与缩小，有需要的朋友参考学习下。
本节主要内容：
js使用滚动条放大、缩小图片的例子。
代码：
复制代码 代码示例:
<!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>js使用滚动条放大、缩小图片-www.jiaochengji.com</title>
<style type="text/css">
<!--
html,body{font-size:12px;width:100%;height:100%;margin:0;padding:0;}
.img{margin:6px 0;}
.resizebutton{background-color:#FFF;border:1px solid #000;padding:4px;cursor:pointer;cursor:hand;position:absolute;display:none;}
.scrollX{position:absolute;background-color:#FFF;border:1px outset #ffffff;filter:Alpha(Opacity=80);opacity:0.8;-moz-user-select:none;}
.scrollX div{width:227px;height:15px;background:url(http://www.jiaochengji.com/cj/scroll_bg.gif) no-repeat;margin:8px 6px;-moz-user-select:none;}
.scrollX div p{cursor:pointer;cursor:hand;position:static;margin-left:5px;width:17px;height:11px;background:url(http://www.jiaochengji.com/cj/scroll_but.gif) no-repeat;-moz-user-select:none;}
-->
</style>
<script language="javascript" type="text/javascript">
// 功能：用于放大图片的滚动条，可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
// 使用方法：在图片代码里加上resizeable=1，同时在onload事件里加上createResizeScroll函数
//始初化变量
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>
<div style="margin:10px 0 0 40px;padding:10px 0;">
<div class="img"><img src="http://www.jiaochengji.com/cj/Bluehills.jpg" height="100" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Sunset.jpg" width="300" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Waterlilies.jpg" width="200" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Winter.jpg" width="100" resizeable="1" galleryimg="no" /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js使用滚动条放大、缩小图片-www.jiaochengji.com</title>
<style type="text/css">
<!--
html,body{font-size:12px;width:100%;height:100%;margin:0;padding:0;}
.img{margin:6px 0;}
.resizebutton{background-color:#FFF;border:1px solid #000;padding:4px;cursor:pointer;cursor:hand;position:absolute;display:none;}
.scrollX{position:absolute;background-color:#FFF;border:1px outset #ffffff;filter:Alpha(Opacity=80);opacity:0.8;-moz-user-select:none;}
.scrollX div{width:227px;height:15px;background:url(http://www.jiaochengji.com/cj/scroll_bg.gif) no-repeat;margin:8px 6px;-moz-user-select:none;}
.scrollX div p{cursor:pointer;cursor:hand;position:static;margin-left:5px;width:17px;height:11px;background:url(http://www.jiaochengji.com/cj/scroll_but.gif) no-repeat;-moz-user-select:none;}
-->
</style>
<script language="javascript" type="text/javascript">
// 功能：用于放大图片的滚动条，可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
// 使用方法：在图片代码里加上resizeable=1，同时在onload事件里加上createResizeScroll函数
//始初化变量
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>
<div style="margin:10px 0 0 40px;padding:10px 0;">
<div class="img"><img src="http://www.jiaochengji.com/cj/Bluehills.jpg" height="100" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Sunset.jpg" width="300" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Waterlilies.jpg" width="200" resizeable="1" galleryimg="no" /></div>
<div class="img"><img src="http://www.jiaochengji.com/cj/Winter.jpg" width="100" resizeable="1" galleryimg="no" /></div>
</div>
</body>
</html>
问题：
在<img>标签里加上了自定义的 resizeable="1"。
在DW里会报警，这样是不是通不过w3c认证的？
您可能感兴趣的文章：
jQuery 幻灯片插件(带缩略图功能)
基于jquery的滚动鼠标放大缩小图片效果
jQuery内容滚动插件 FlexSlider
等比例缩小图片尺寸的js代码
js动态获取图片width与height 等比例缩放的代码
JS滚轮事件onmousewheel的用法
jQuery循环滚动展示代码 可应用到文字和图片上
js使用滚动条放大、缩小图片的代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
js结合css实现图片自动等比例缩小且垂直居中的代码
[关闭]