JavaScript实现舆图节制上下阁下的移动

发布时间：2018-09-01 08:50:31 所属栏目：运营来源：站长网

导读：猛火网(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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要