答案：这段时间比较闲，就搞了这么一个功能来练练手。 因为没有系统的学习过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"> <!-- 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.blueshut.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.blueshut.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函数 // 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;} } //------------------------------------------------------------------------------------------------ //加入事件监听 //------------------------------------------------------------------------------------------------ Att</pre><p>上一个：<a href="/show/a2cbca9ac351b987.htm">Javascript 个人笔记（没有整理，很乱）</a><br/>下一个：<a href="/show/a4f2ddf128e9f9e4.htm">建立良好体验度的Web注册系统ajax</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/dded34d979ea4001.htm"><img src='/upload/2013111520/20120618012804210.png' width=105 height=105><br/>ExtJS4.x数据模型之Model </a></li><li><a href="/show/eb7f5a022df7a210.htm"><img src='/upload/2013111520/20120811024850873.png' width=105 height=105><br/>最简单的ExtJS4的MVC实例</a></li><li><a href="/show/e225412581bbb1eb.htm"><img src='/upload/2013111519/20121201084456622.png' width=105 height=105><br/>Extjs4---用RowEditing对数据进行增加，修改</a></li><li><a href="/show/143d85aef8aeeb1f.htm"><img src='/upload/20121013/2006122914306680.jpg' width=105 height=105><br/>JavaScript高级程序设计</a></li><li><a href="/show/7ef5773905b3f190.htm"><img src='/upload/2013111520/20120713010458852.png' width=105 height=105><br/>js常用实例</a></li><li><a href="/show/20c6f83c812c22fa.htm"><img src='/upload/2013111604/20110810110332243.png' width=105 height=105><br/>自己动手写MiniBBS系列（基本篇）之用户登录</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd><dd><a target="_blank" href="/show/3aa8e41c89689f54.htm">JS怎样操作PHP中的参数</a></dd><dd><a target="_blank" href="/show/b4b8714c029b37a6.htm">js 怎么在一打开页面就加载这个函数。</a></dd><dd><a target="_blank" href="/show/8c57097425b52fc7.htm">Date.parse()的问题(js)</a></dd><dd><a target="_blank" href="/show/012152bfb53fdf04.htm"><script src="/{maxcms:sitepath}js/common.js"></script>是什么意思</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>