您的位置:寻梦网首页编程乐园CSS 初步DHTML动态效果实例
能用鼠标拖放的图片

上一页 返回目录 下一页

名称:

能用鼠标拖放的图片

实例:

 

 

用鼠标拖动图片“笑脸”试试!
教程: 第一步:将下面的代码加入html的<head></head>之间

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

第二步,修改<body>语句为:

第三步,将下列代码加入<body></body>之间的任意地方:

<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="smile.gif" >

 

说明: 此功能只适用于IE4.0
上一页 返回目录 下一页