如何实现鼠标拖动图片实现窗口移动

如同
http://www.9lala.com/Html/HUNTER/8162_13160.html
这样在图片上,按下鼠标,实现窗口上下左右移动的..我copy了这个网站的js(ts_cn.js)但出来之后后问题.每次放开鼠标,再按下窗口又跳到顶端了.
高手帮忙改改这个js吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script> 
function initImg(){
viewimg.onmousedown = engage;
viewimg.onmousemove = dragIt;
viewimg.onmouseup = release;
viewimg.onmouseout = release;
viewimg.style.cursor = handICON;
} var movICON, handICON, status, oX, oY, cX, cY, mX, mY;
status = 0;
cX = 0;
cY = 0;movICON = "move";
handICON = "hand";function dragIt(){
if (status == 1){
mX = window.event.screenX + cX;
mY = window.event.screenY + cY;
window.scrollTo(oX - mX, oY - mY);
}
return false;
}function engage(){
chgCursor(2);
status = 1;
oX = 2 * document.documentElement.scrollLeft;
cX = document.documentElement.scrollLeft - window.event.screenX;
oY = 2 * document.documentElement.scrollTop;
cY = document.documentElement.scrollTop - window.event.screenY;
return false;
}function release(){
chgCursor(1);
status = 0;
return false;
}function chgCursor(url){
switch (url){
case 1: 
{ 
viewimg.style.cursor = handICON;
break;
}
case 2:
{
viewimg.style.cursor = movICON;
break;
}
default :
{
viewimg.style.cursor = handICON;
break;
}
}
}
//图片移动
</script></head><body >
<img src="a.jpg"   onMouseDown="initImg()" id="viewimg"/></body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script>  
    function initImg() {
        viewimg.onmousedown = engage;
        viewimg.onmousemove = dragIt;
        viewimg.onmouseup = release;
        viewimg.onmouseout = release;
        viewimg.style.cursor = handICON;
    }var movICON, handICON, status, oX, oY, cX, cY, mX, mY;
    status = 0;
    cX = 0;
    cY = 0;movICON = "move";
    handICON = "hand";function dragIt() {
        if (status == 1) {
            mX = window.event.screenX + cX;
            mY = window.event.screenY + cY;
            window.scrollTo(oX - mX, oY - mY);
        }
        return false;
    }function engage() {
        chgCursor(2);
        status = 1;
        oX = 2 * (document.documentElement.scrollLeft || document.body.scrollLeft);
        cX = (document.documentElement.scrollLeft || document.body.scrollLeft) - window.event.screenX;
        oY = 2 * (document.documentElement.scrollTop || document.body.scrollTop);
        cY = (document.documentElement.scrollTop || document.body.scrollTop) - window.event.screenY;
        return false;
    }function release() {
        chgCursor(1);
        status = 0;
        return false;
    }function chgCursor(url) {
        switch (url) {
        case 1:
            {
                viewimg.style.cursor = handICON;
                break;
            }
        case 2:
            {
                viewimg.style.cursor = movICON;
                break;
            }
        default:
            {
                viewimg.style.cursor = handICON;
                break;
            }
        }
    }
    //图片移动
    </script></head><body >
    <img src="http://mh.9lala.com/manhua/hunterxhunter/277/1.jpg" onMouseDown="initImg()" id="viewimg"/></body>
    </html>
      

  2.   

    我写了一个IE下的，lz可以参考下<!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>
        <title></title>
        <style>
        div
        {
         width:80%;
         height:1200px;
         margin-left:auto;
         margin-right:auto;
         background-color:#999;
        }
        </style>
        <script language="javascript">        var currentY;
            var ctop = 0;
            function startMove(event) {
                document.attachEvent("onmousemove", scrollImg);
                currentY = event.offsetY;//原始鼠标位置
                ctop = document.documentElement.scrollTop;//原始滚动高度           
            }
            function endMove(event) {
                document.detachEvent("onmousemove", scrollImg);
            }
            function scrollImg(event) {
                var y = event.offsetY;//现在鼠标位置            window.scrollTo(document.body.scrollLeft, ctop + currentY - y);//滚动窗体
                document.getElementById("divx").innerHTML = y + ":" + currentY + ":" + document.documentElement.scrollTop;
            }
        </script>
    </head>
    <body>
    <div id="divx" onmousedown="startMove(event);"  onmouseup = "endMove(event);">test</div>
    </body>
    </html>