javascript 模拟map操作-JavaSript-爱易网页

javascript 模拟map操作

日期：2014-05-16　浏览次数：20405 次

javascript 模拟地图操作

功能：放大缩小，拖动，变换样式（图片）问题：修改图片透明度时会闪

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <style type="text/css">
.drag{position:relative;cursor:hand}
</style>

<script language="javascript">

var dragapproved = false;
var picture,x,y

function move(){ //拖动鼠标
    if(event.button==1&&dragapproved){
        picture.style.pixelLeft=temp1+event.clientX-x
        picture.style.pixelTop=temp2+event.clientY-y
        return false;
    }
}

function drags(){ //拖动前的初始化工作
    if(!document.all) return
    if(event.srcElement.className=="drag"){
        dragapproved = true
        picture=event.srcElement;
        temp1=picture.style.pixelLeft
        temp2=picture.style.pixelTop
        x=event.clientX
        y=event.clientY
        document.onmousemove=move
    }
}

document.onmousedown=drags //按下鼠标左键
document.onmouseup=new Function("dragapproved=false") //松开鼠标左键

</script><!-- 拖动鼠标，实现图像拖动功能-->

<script language="javascript">

function Counting(count){   
if(event.wheelDelta>=120) //event.wheelDelta设置或获取滚轮按钮滚动的距离和方向。
    count++;   
else if(event.wheelDelta<=-120) 
    count--;   
return count;   
}//滚轮每滚动一次使count加/减1 
   
var count=10;   
function Picture(){   
count=Counting(count);   
Resize(count);   
return false;   
}//滚轮滚动后适当控制图片的缩放比例   

var pic = "img1.jpg";
var opacity = 100;
function Resize(count){ 
	var m = document.getElementById('map');
	if (count <= 8)
	{
		if (m.src.indexOf("img2.jpg") > 0 && opacity == 100)
		{
			pic= "img1.jpg";
			var num=setInterval(function(){ChangePic(num)},200);
		}
		
	} else
	{
		if (m.src.indexOf("img1.jpg") > 0 && opacity == 100)
		{
			pic= "img2.jpg";
			var num=setInterval(function(){ChangePic(num)},200);
		}
		
	}
	m.style.zoom=count+'0%';
}//设置图片缩放大小

function ChangePic(num)
{
	var m = document.getElementById("map");
	opacity = opacity - 20;
	if (opacity <= 0)
	{
		clearInterval(num);
		opacity = 100;
		m.src = pic;
	}
	m.style.filter = "alpha(opacity=" + opacity + ")";
}
</script><!-- 滚动鼠标滚轮，实现图像缩放功能-->

<img src="img1.jpg" width="1337" height="905" border="0" alt="" align="middle"  id="map" class="drag" style="margin:0" onmousewheel="Picture()">
 </head>

 <body>
  
 </body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript 模拟map操作

相关资料更多>

推荐阅读更多>