页面图片浏览

最新推荐文章于 2024-01-08 11:16:39 发布

liujun_win

最新推荐文章于 2024-01-08 11:16:39 发布

阅读量503

点赞数

分类专栏： WEB相关文章标签： javascript 浏览器 url

本文链接：https://blog.csdn.net/liujun_win/article/details/2912280

版权

WEB相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在页面上浏览图片，实现图片的拖放

 
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>位图浏览器</title>
<style type="text/css">
<!--
#pic {
    width:1000px;
    height:600px;
    border: 3px solid #ccc;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    cursor: pointer ;
}
-->
</style>
<script language="javascript" src="Request.js"></script>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 0.05;  //速度
var picWidth = 10000;  // 大图的宽高
var picHeight = 10000;
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";
}
}
function SetImageUrl()
{
    self.moveTo(0,0);
    self.resizeTo(screen.availWidth,screen.availHeight);  
    var IMGURL = "" ;
    document.getElementById('pic').style.backgroundImage = "url("+IMGURL+")" ;
}
-->
</script>
</head>
<body onload="SetImageUrl()">
<TABLE width="100%">
<TR>
<TD align="center">
<div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
</TD>
</TR>
</TABLE>
</body>
</html>
 