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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js实现用滚动条来放大缩小图片的代码

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 250 ::

收藏到网摘: n/a

javascript实现爱你在FF IE下都有效的添加一个项目 javascript实现unicode和字符的互相转换

这段时间比较闲，就搞了这么一个功能来练练手。
因为没有系统的学习过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>
<div style="margin:10px 0 0 40px;padding:10px 0;"> <div class="img"><img src="http://www.blueshut.com/cj/Bluehills.jpg" height="100" resizeable="1" galleryimg="no" /></div> <div class="img"><img src="http://www.blueshut.com/cj/Sunset.jpg" width="300" resizeable="1" galleryimg="no" /></div> <div class="img"><img src="http://www.blueshut.com/cj/Waterlilies.jpg" width="200" resizeable="1" galleryimg="no" /></div> <div class="img"><img src="http://www.blueshut.com/cj/Winter.jpg" width="100" resizeable="1" galleryimg="no" /></div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

另外问大家个问题，像我这样自定义属性的方式行不行的？就是在<img>标签里加上了自定义的 resizeable="1"。在DW里会报警，这样是不是通不过w3c认证的？

javascript实现爱你在FF IE下都有效的添加一个项目 javascript实现unicode和字符的互相转换

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

评论 (0) All