用javascript实现在小方框中浏览大图的代码

时间：2021-05-18

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<styletype="text/css">
<!--
#pic{
height:300px;
width:420px;
border:3pxsolid#ccc;
background-image:url(http://www.happyshow.org/sample/20060619/3.jpg);
background-repeat:no-repeat;
background-position:0px0px;
background-color:#333;
cursor:crosshair;
}
-->
</style>
<scripttype="text/javascript">
<!--
varp=newArray();
varspeed=1.0;//1表示1倍速度，即原速
varx,y//鼠标点下去时背景的坐标
varx_new,y_new//位移
functiongetmouseposition(event)
{
if(document.all)
{
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}else
{
x=event.layerX;
y=event.layerY;
}
}
functionsetmouseposition(event)
{
if(document.getElementById('pic').style.backgroundPosition.length==0)
{document.getElementById('pic').style.backgroundPosition="0px0px";}
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);
document.getElementById('pic').style.backgroundPosition=x2+"px"+y2+"px";
}
-->
</script>
</head>
<body>
<divid="pic"onmousedown="getmouseposition(event)"onmouseup="setmouseposition(event)"></div>
今天在玩googleearth4.0b，发现PrintScreen下来的图片很大，如果直接放在网页上，因为尺寸太大又不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。呵呵，该死的是，这段代码还兼容firefox。
</body>
</html>
今天在玩googleearth4.0b，发现PrintScreen下来的图片很大，如果放在网页不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。呵呵，该死的是，这段代码还兼容firefox。

--------------------------------------------------------------------------------------
2006.6.20修改：

·添加了滚动的范围，不会出现背景
·用到onmousemove事件，图片实时随鼠标移动而移动

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<styletype="text/css">
<!--
#pic{
width:420px;
height:300px;
border:3pxsolid#ccc;
background-image:url(http://www.happyshow.org/sample/20060619/3.jpg);
background-repeat:no-repeat;
background-position:0px0px;
cursor:move;
}
-->
</style>
<scripttype="text/javascript">
<!--
varp=newArray();
varspeed=0.05;//速度
varpicWidth=1280;//大图的宽高
varpicHeight=971;
varx,y//鼠标点下去时背景的坐标
varx_new,y_new//位移
varhaveclick=false;
functiongetmouseposition(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;
}
functionmovestop()
{
haveclick=false;
}
functionmovestart(event)
{
if(haveclick)
{
if(document.getElementById('pic').style.backgroundPosition.length==0)
{document.getElementById('pic').style.backgroundPosition="0px0px";}
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>
<divid="pic"onmousedown="getmouseposition(event)"onmousemove="movestart(event)"onmouseup="movestop()"onmouseout="movestop()"></div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章