烈火网(LieHuo.Net)网页特效教程：本文介绍的是JavaScript编程实现地图上下左右的移动控制代码，比较不错，现在的地图网站很多，类似这种的特效也有很多，这是其中这一，写的很不错，用尽可能少的代码解决实际问题，各位读者不仿借鉴一下。欢迎对烈火的教程提出宝贵意见。 请看演示与代码： <html><br /> <head><br /> <title>JavaScript地图移动控制</title><br /> <style type="text/css"><br /> *{padding:0;margin:0;}<br /> html,body{height:100%;overflow:hidden;}<br /> #control{position:absolute;top:10px;left:10px;width:58px;height:58px;z-index:10;background:url(http://www.veryhuo.com/uploads/allimg/1004/ZoomBarControl.gif) no-repeat;}<br /> #control i{position:absolute;width:15px;height:15px;text-indent:-10000px;cursor:pointer;}<br /> #rollUp{bottom:0;left:20px;}<br /> #rollDown{top:0;left:20px;}<br /> #rollLeft{top:20px;right:0;}<br /> #rollRight{top:20px;left:0;}<br /> #albumRoll{position:relative;height:100%;width:80%;overflow:hidden;border:2px solid #ccf;}<br /> #albumList{position:absolute;}<br /> </style><br /> </head><br /> <body><br /> <div id="control"><br /> <i id="rollUp" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向上</i><br /> <i id="rollDown" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向下</i><br /> <i id="rollLeft" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向左</i><br /> <i id="rollRight" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向右</i><br /> </div><br /> <div id="albumRoll"><br /> <img id="albumList" onload="map.initial()" src="http://www.veryhuo.com/uploads/allimg/1004/liehuo_maps.jpg" /><br /> </div><br /> <script type="text/javascript"><br /> var $id=function(id){ return document.getElementById(id);}<br /> var map={<br /> locked:0,<br /> initial:function(){<br /> $id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2;<br /> $id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2;<br /> },<br /> scroll:function(othis){<br /> if (map.locked==0){<br /> var x=0,y=0;<br /> if(othis.id=='rollUp'){<br /> y=2;<br /> }<br /> if(othis.id=='rollDown'){<br /> y=-2;<br /> }<br /> if(othis.id=='rollLeft'){<br /> x=2;<br /> }<br /> if(othis.id=='rollRight'){<br /> x=-2;<br /> }<br /> roll = setInterval(function(){<br /> $id('albumRoll').scrollLeft+=x;<br /> $id('albumRoll').scrollTop+=y;<br /> }, 5);<br /> map.locked=1;<br /> }<br /> },<br /> stop:function (){<br /> if (roll){<br /> clearInterval(roll);<br /> map.locked = 0;<br /> }}<br /> }<br /> </script><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 类似HAO123.COM的多个搜索引擎跳转效果怎样成为一名超级博客
由 dawei