JavaScript实现地图控制上下左右的移动

发布时间：2018-11-01 16:51:57 所属栏目：交互来源：站长网

导读：烈火网(LieHuo.Net)网页特效教程：本文介绍的是 Java Script编程实现地图上下左右的移动控制代码，比较不错，现在的地图网站很多，类似这种的特效也有很多，这是其中这一，写的很不错，用尽可能少的代码解决实际问题，各位读者不仿借鉴一下。欢迎对烈火的

　　烈火网(LieHuo.Net)网页特效教程：本文介绍的是JavaScript编程实现地图上下左右的移动控制代码，比较不错，现在的地图网站很多，类似这种的特效也有很多，这是其中这一，写的很不错，用尽可能少的代码解决实际问题，各位读者不仿借鉴一下。欢迎对烈火的教程提出宝贵意见。

　　请看演示与代码：

<html> <head> <title>JavaScript地图移动控制</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} #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;} #control i{position:absolute;width:15px;height:15px;text-indent:-10000px;cursor:pointer;} #rollUp{bottom:0;left:20px;} #rollDown{top:0;left:20px;} #rollLeft{top:20px;right:0;} #rollRight{top:20px;left:0;} #albumRoll{position:relative;height:100%;width:80%;overflow:hidden;border:2px solid #ccf;} #albumList{position:absolute;} </style> </head> <body> <div id="control"> <i id="rollUp" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向上</i> <i id="rollDown" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向下</i> <i id="rollLeft" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向左</i> <i id="rollRight" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向右</i> </div> <div id="albumRoll"> <img id="albumList" onload="map.initial()" src="http://www.veryhuo.com/uploads/allimg/1004/liehuo_maps.jpg" /> </div> <script type="text/javascript"> var $id=function(id){ return document.getElementById(id);} var map={ locked:0, initial:function(){ $id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2; $id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2; }, scroll:function(othis){ if (map.locked==0){ var x=0,y=0; if(othis.id=='rollUp'){ y=2; } if(othis.id=='rollDown'){ y=-2; } if(othis.id=='rollLeft'){ x=2; } if(othis.id=='rollRight'){ x=-2; } roll = setInterval(function(){ $id('albumRoll').scrollLeft+=x; $id('albumRoll').scrollTop+=y; }, 5); map.locked=1; } }, stop:function (){ if (roll){ clearInterval(roll); map.locked = 0; }} } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：葫芦岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

SPN 迎来2.0年代中国	随着5G的普及，新的物
“MCU+传感器”方案怎	优秀的短视频突围者，