小方框中浏览大图—HTMLCSS教程

首页　韩国资源　酷站加油　我的展厅　设计名站　古典元素　推荐下载　设计欣赏　每周专访　招募精英　人才专区　网页教程　平面设计　编程开发　设计竞赛

当前位置：首页 > 网页教程 > HTMLCSS教程 > 正文

Google

小方框中浏览大图

来源：网页设计师联盟　2006年07月28日 11:42　网友评论：0条　点击：

把如下代码复制到<body></body>之间

把如下代码复制到<head></head>之间

<style type="text/css">

</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代码区的"background-image"的值为图片的地址,"width"和"height"为框的大小,"var picWidth"和"var picHeight"为图片的宽和高,这些参数都可根据您的需要更改.

上一篇：类似与QQ的好友/黑名单之类的树型菜单　　下一篇：判断浏览器是否支持JavaScript和Cookies

【收藏此页】【打印】【关闭】

　相关文章

　我要点评

免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。对本文有任何异议，请联络：68design#163.com
转载要求：作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印。

关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图

Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师，当然上网页设计师联盟】　