鼠标拖动图片的JavaScript_图片特效特效

用鼠标拖动图片移动，松开鼠标图片就会放在拖动的地方，实际上JavaScript是不能直接拖放图片的，这里的拖放仍然是拖动的层，把图片放到层内，这样就实现了鼠标拖放图片。

<html>
<head>
<title>鼠标拖动图片的JavaScript</title>
</head>
<body onload="init()">
<SCRIPT language=JavaScript>
<!--
drag = 0
move = 0
function init() {
    window.document.onmousemove = mouseMove
    window.document.onmousedown = mouseDown
    window.document.onmouseup = mouseUp
    window.document.ondragstart = mouseStop
}
function mouseDown() {
    if (drag) {
        clickleft = window.event.x - parseInt(dragObj.style.left)
        clicktop = window.event.y - parseInt(dragObj.style.top)
        dragObj.style.zIndex += 1
        move = 1
    }
}

function mouseStop() {
    window.event.returnValue = false
}

function mouseMove() {
    if (move) {
        dragObj.style.left = window.event.x - clickleft
        dragObj.style.top = window.event.y - clicktop
    }
}

function mouseUp() {
    move = 0
}
//-->
</SCRIPT>
<DIV id=block1 onmouseout=drag=0 onmouseover="dragObj=block1; drag=1;" 
style="HEIGHT: 90px; LEFT: 200px; POSITION: absolute; TOP: 200px; WIDTH: 90px">
<img alt="" border=0 src="http://p1.mb5u.com/texiao/1/20110225160445167.gif" border="0" />
</body>
</html>

所属频道：图片特效特效/更新时间：2012-12-10

[收藏][报错][返回列表]

鼠标拖动图片的JavaScript_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些