用鼠标移动显示的图片类似google地图

站内搜索

热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机

网页特效分类

网页特效分类 >> 图形特效

用鼠标移动显示的图片类似google地图

[ 发布者：肥鱼 | 来源：本站整理 | 时间：2006-7-24 | 浏览：人次 ]

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JcwCn.Com|---用鼠标移动显示的图片类似google地图</title>
<style type="text/css">
<!--
#pic {
	width:480px;
	height:320px;
	border: 3px solid #ccc;
	background-image: url(../Uploadfile/2006515151036789.JPG);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 0.05;  //速度
var picWidth = 1280;  // 大图的宽高
var picHeight = 971;
var x,y // 鼠标点下去时背景的坐标
var x_new,y_new  //位移
var haveclick = false;

function getmouseposition(event)
{
	if(document.all)
	{
		x = document.body.scrollLeft+event.clientX;
		y = document.body.scrollTop+event.clientY;
	}else
	{
		x = event.layerX;
		y = event.layerY;
	}	
	haveclick = true;
}
function movestop()
{
	haveclick = false;
}

function movestart(event)
{
if(haveclick)
{
	if(document.getElementById('pic').style.backgroundPosition.length==0)
		{document.getElementById('pic').style.backgroundPosition="0px 0px";}
	p = document.getElementById('pic').style.backgroundPosition.split(" ")

	if(document.all)
	{	
		x_new = document.body.scrollLeft+event.clientX;
		y_new = document.body.scrollTop+event.clientY;
	}else
	{	 
		x_new = event.layerX;
		y_new = event.layerY;	
	}
	
	x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);    // 计算位移量
	y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
	
	if (x2<-picWidth+420) x2=-picWidth+420;
	if (y2>0) y2=0;
	if (x2>0) x2=0;
	if (y2<-picHeight+300) y2=-picHeight+300;

	document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
}
-->
</script>
</head>

<body>
<div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
</body>

</html>

本类相关特效