欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用javascript實現(xiàn)在小方框中瀏覽大圖的代碼

 更新時間：2007年08月14日 19:32:01   作者：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
<!--
#pic {
 height: 300px;
 width: 420px;
 border: 3px solid #ccc;
 background-image: url(http://www.happyshow.org/sample/20060619/3.jpg);
 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 表示1倍速度，即原速
var x,y // 鼠標(biāo)點下去時背景的坐標(biāo)
var x_new,y_new  //位移
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;
 } 
}
function setmouseposition(event)
{
 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);
 document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
-->
</script>
</head>
<body>
<div id="pic" onmousedown="getmouseposition(event)" onmouseup="setmouseposition(event)"></div>
今天在玩 google earth 4.0b，發(fā)現(xiàn) Print Screen 下來的圖片很大，如果直接放在網(wǎng)頁上，因為尺寸太大又不合適，又不想壓縮圖片的尺寸，于是乎就想到了這種方法，沒想到實現(xiàn)起來比預(yù)想的要容易。呵呵，該死的是，這段代碼還兼容 firefox。
</body>
</html>
今天在玩 google earth 4.0b，發(fā)現(xiàn) Print Screen 下來的圖片很大，如果放在網(wǎng)頁不合適，又不想壓縮圖片的尺寸，于是乎就想到了這種方法，沒想到實現(xiàn)起來比預(yù)想的要容易。呵呵，該死的是，這段代碼還兼容 firefox。

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

·添加了滾動的范圍，不會出現(xiàn)背景
·用到onmousemove事件，圖片實時隨鼠標(biāo)移動而移動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
<!--
#pic {
 width:420px;
 height:300px;
 border: 3px solid #ccc;
 background-image: url(http://www.happyshow.org/sample/20060619/3.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 // 鼠標(biāo)點下去時背景的坐標(biāo)
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>

相關(guān)文章

最新評論