码迷,mamicode.com
首页 > Web开发 > 详细

JS随意拖动图片

时间:2015-05-25 18:16:37      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

<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>

 

JS随意拖动图片

标签:

原文地址:http://www.cnblogs.com/zhaozzm/p/4528260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!