132、小方框中浏览大图

132、小方框中浏览大图

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

 

<style type="text/css">

<!--

#pic {

       width:480px;

       height:320px;

       border: 3px solid #ccc;

       background-image: url(images/butong_net.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>

 

 

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

 

 

 

 

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

使用说明:head代码区的"background-image"的值为图片的地址,"width""height"为框的大小,"var picWidth""var picHeight"为图片的宽和高,这些参数都可根据您的需要更改.

 

 

 

Write a comment

Comments: 0