防百度地图实现div的缩放和拖拽

1.创建个drag_map.js文件，把下方的代码拷贝进去。

drag = 0
move = 0

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;

function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}

function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");

function clickMove(s){
if(s=="up"){
dragObj.style.top = parseInt(dragObj.style.top) + 100;
}else if(s=="down"){
dragObj.style.top = parseInt(dragObj.style.top) - 100;
}else if(s=="left"){
dragObj.style.left = parseInt(dragObj.style.left) + 100;
}else if(s=="right"){
dragObj.style.left = parseInt(dragObj.style.left) - 100;
}

}

function smallit(){
var height1=images1.height;
var width1=images1.width;
images1.height=height1/1.2;
images1.width=width1/1.2;
}

function bigit(){
var height1=images1.height;
var width1=images1.width;
images1.height=height1*1.2;
images1.width=width1*1.2;
}
function realsize()
{
images1.height=images2.height;
images1.width=images2.width;
block1.style.left = 0;
block1.style.top = 0;

}
function featsize()
{
var width1=images2.width;
var height1=images2.height;
var width2=701;
var height2=576;
var h=height1/height2;
var w=width1/width2;
if(height1<height2&&width1<width2)
{
images1.height=height1;
images1.width=width1;
}
else
{
if(h>w)
{
images1.height=height2;
images1.width=width1*height2/height1;
}
else
{
images1.width=width2;
images1.height=height1*width2/width1;
}
}
block1.style.left = 0;
block1.style.top = 0;
}

function onWheelZoom(obj){ //¹öÂÖËõ·Å
zoom = parseFloat(obj.style.zoom);
tZoom = zoom + (event.wheelDelta>0 ? 0.05 : -0.05);
if(tZoom<0.1 ) return true;
obj.style.zoom=tZoom;
return false;
}

2.创建一个html文件，把下方代码拷贝进去。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="js/drag_map.js"></script>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background:url('images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg');
background-size: 100% 100%;
position: relative;
}
.big_box{
width: 500px;
height: 500px;
border:1px solid #ccc;
overflow: hidden;
position: relative;
}
.box a{
position: absolute;
display: block;
width: 20px;
height: 20px;
border:1px solid #000;
}
.a1{
left: 85px;
top: 238px;
}
</style>
<script type="text/JavaScript">
</script>
</head>
<body>
<div class="big_box">
<div class="dragAble" style="z-index: 10;left: 0px; width: 0px; position: absolute; top: 150px; height: 0px" >
<div onmousewheel="return onWheelZoom(this)" style="zoom: 0.7" name="images1" class="box">
<a href="" class="a1">1</a>
<a href="" class="a2">2</a>
<a href="" class="a3">3</a>
<a href="" class="a4">4</a>
</div>
</div>
</div>
</body>
</html>

效果图

posted @ 2018-08-22 10:48  肖镜泽  阅读(117)  评论(0)    收藏  举报