首页 > 技术文章 > JS随意拖动图片

zhaozzm 2015-05-25 16:42 原文

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS随意拖动图片丨河北冷风机</title>
</head>
<body onLoad="remove()">
<div id="div1" onMouseOver="dragimages=div1;drag=1;"style="height:77px;left:10px;position:absolute;top:10px;width:90px">
<img name="img1" alt="" border="0" src="/images/logo.gif" style="cursor:pointer ">
</div>
<p>
<script language="javascript">
drag = 0;
move = 0;
function mousedown()
{
    if(drag)
    {
        X1 = window.event.x - parseInt(dragimages.style.left);
        Y1 = window.event.y - parseInt(dragimages.style.top);
        dragimages.style.Index += 1;
        move = 1;
    }
}
function mouseStop()
{
    window.event.returnValue = false;
}
function mousemove()
{
    if (move)
    {
        dragimages.style.left = window.event.x - X1;
        dragimages.style.top = window.event.y - Y1;
    }
}
function mouseup()
{
    move = 0;
}
function remove()
{
    document.all.div1.onmousemove = mousemove;
    document.all.div1.onmousedown = mousedown;
    document.all.div1.onmouseup = mouseup;
    document.all.div1.ondragstart  = mouseStop;
}
</script>
</body>
</html>

<BR><BR><BR><BR><BR> 在图片上按住鼠标左键就能随意移动图片了

<BR><BR><hr><br>

 

推荐阅读