<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Unt titled document</title>
<style type="text/css">
<!--
#pic {
height: 300px;
width: 420px;
border: 3px solid #ccc;
background-image: url(/sample/20060619/);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #333;
cursor: crosshair;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 1.0; // 1 represents 1x speed, that is, the original speed
var x,y // The coordinates of the background when the mouse is clicked
var x_new,y_new //Displacement
function getmouseposition(event)
{
if()
{
x = +;
y = +;
}else
{
x = ;
y = ;
}
}
function setmouseposition(event)
{
if(('pic').==0)
{('pic').="0px 0px";}
p = ('pic').(" ")
if()
{
x_new = +;
y_new = +;
}else
{
x_new = ;
y_new = ;
}
x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // Calculate the displacement
y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
('pic').=x2+"px "+y2+"px";
}
-->
</script>
</head>
<body>
<div onmousedown="getmouseposition(event)" onmouseup="setmouseposition(event)"></div>
Today I was playing google earth 4.0b and found that the pictures from Print Screen were very large. If I placed them directly on the webpage, because the size is too large and inappropriate, and I don’t want to compress the size of the picture, so I thought of this method, but I didn’t expect it to be easier to implement than expected. Haha, damn it, this code is also compatible with firefox.
</body>
</html>
Today I was playing google earth 4.0b and found that the pictures found in Print Screen were very large. If they were not suitable for putting them on the web page, and they didn’t want to compress the size of the picture, so I thought of this method, but I didn’t expect it to be easier to implement than expected. Haha, damn it, this code is also compatible with firefox.
--------------------------------------------------------------------------------------
2006.6.20 Modification:
·Added scrolling range, no background appears
·Use onmousemove event, the picture moves with the mouse in real time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Unt titled document</title>
<style type="text/css">
<!--
#pic {
width:420px;
height:300px;
border: 3px solid #ccc;
background-image: url(/sample/20060619/);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 0.05; //Speed
var picWidth = 1280; // The width and height of the large picture
var picHeight = 971;
var x,y // The coordinates of the background when the mouse is clicked
var x_new,y_new //Displacement
var haveclick = false;
function getmouseposition(event)
{
if()
{
x = +;
y = +;
}else
{
x = ;
y = ;
}
haveclick = true;
}
function movestop()
{
haveclick = false;
}
function movestart(event)
{
if(haveclick)
{
if(('pic').==0)
{('pic').="0px 0px";}
p = ('pic').(" ")
if()
{
x_new = +;
y_new = +;
}else
{
x_new = ;
y_new = ;
}
x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // Calculate the displacement
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;
('pic').=x2+"px "+y2+"px";
}
}
-->
</script>
</head>
<body>
<div onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
</body>
</html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Unt titled document</title>
<style type="text/css">
<!--
#pic {
height: 300px;
width: 420px;
border: 3px solid #ccc;
background-image: url(/sample/20060619/);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #333;
cursor: crosshair;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 1.0; // 1 represents 1x speed, that is, the original speed
var x,y // The coordinates of the background when the mouse is clicked
var x_new,y_new //Displacement
function getmouseposition(event)
{
if()
{
x = +;
y = +;
}else
{
x = ;
y = ;
}
}
function setmouseposition(event)
{
if(('pic').==0)
{('pic').="0px 0px";}
p = ('pic').(" ")
if()
{
x_new = +;
y_new = +;
}else
{
x_new = ;
y_new = ;
}
x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // Calculate the displacement
y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
('pic').=x2+"px "+y2+"px";
}
-->
</script>
</head>
<body>
<div onmousedown="getmouseposition(event)" onmouseup="setmouseposition(event)"></div>
Today I was playing google earth 4.0b and found that the pictures from Print Screen were very large. If I placed them directly on the webpage, because the size is too large and inappropriate, and I don’t want to compress the size of the picture, so I thought of this method, but I didn’t expect it to be easier to implement than expected. Haha, damn it, this code is also compatible with firefox.
</body>
</html>
Today I was playing google earth 4.0b and found that the pictures found in Print Screen were very large. If they were not suitable for putting them on the web page, and they didn’t want to compress the size of the picture, so I thought of this method, but I didn’t expect it to be easier to implement than expected. Haha, damn it, this code is also compatible with firefox.
--------------------------------------------------------------------------------------
2006.6.20 Modification:
·Added scrolling range, no background appears
·Use onmousemove event, the picture moves with the mouse in real time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Unt titled document</title>
<style type="text/css">
<!--
#pic {
width:420px;
height:300px;
border: 3px solid #ccc;
background-image: url(/sample/20060619/);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 0.05; //Speed
var picWidth = 1280; // The width and height of the large picture
var picHeight = 971;
var x,y // The coordinates of the background when the mouse is clicked
var x_new,y_new //Displacement
var haveclick = false;
function getmouseposition(event)
{
if()
{
x = +;
y = +;
}else
{
x = ;
y = ;
}
haveclick = true;
}
function movestop()
{
haveclick = false;
}
function movestart(event)
{
if(haveclick)
{
if(('pic').==0)
{('pic').="0px 0px";}
p = ('pic').(" ")
if()
{
x_new = +;
y_new = +;
}else
{
x_new = ;
y_new = ;
}
x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // Calculate the displacement
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;
('pic').=x2+"px "+y2+"px";
}
}
-->
</script>
</head>
<body>
<div onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
</body>
</html>