纳金网

标题: 鼠标拖动图片,JS实现鼠标拖动图片到网页任何位置 [打印本页]
作者: 奇    时间: 2011-12-30 19:25
标题: 鼠标拖动图片,JS实现鼠标拖动图片到网页任何位置
烈07火54网(LieHuo12.Net)教11程 鼠标拖动图片,JS实现鼠标拖动图片到网页任何位置。鼠标拖动图片，经常见的一款效果了，觉得这款代码写的比较有新意，特别是代码量非常少，相信对学习JavaScript的朋友有所启发，点击运行，鼠标放到图片上，按下左键移动鼠标，图片就跟着移动了。
　　代码演示：
<html>

<head>

<title>使用鼠标拖动图片</title>

<script language="javascript">

<!--

down = false;

var x,y,imgID;

function dragImage(obj){

imgID = obj;

x = event.x - parseInt(imgID.style.left);

y = event.y - parseInt(imgID.style.top);

down=true;

}

function cancelDrag(){ down=false; }

function moveImage(){

if(down){

imgID.style.left  = event.x - x;

imgID.style.top   = event.y - y;

event.returnValue = false;

}

}

document.onmousemove = moveImage;

document.onmouseup = cancelDrag;

//-->

</script>

</head>

<body>

<img src="http://www.veryhuo.com/images/logo.gif" style="position:absolute;left:0px;top=0px"

onMouseDown="dragImage(this)">

</div>

</body>

</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>


文章源自：烈火网，原文：http://www.veryhuo.com/a/view/28772.html





作者: 奇    时间: 2012-1-6 20:28
这个不错耶！有空试试
作者: 晃晃    时间: 2012-1-30 23:19
祝你新的一年:生活越来越好，脾气越来越小，经济再往上搞，基本解决温饱，顿顿保证没草，家中肉多狼少，饭菜不用再讨，也有异性来骚扰。
作者: 菜刀吻电线    时间: 2012-3-25 23:28
人过留名!
作者: 菜刀吻电线    时间: 2012-5-6 23:18
发了那么多，我都不知道该用哪个给你回帖了，呵呵
作者: C.R.CAN    时间: 2012-5-15 23:18
路过、路过、快到鸟，列位请继续...ing
作者: 奇    时间: 2012-6-2 23:21
其实楼主所说的这些，俺支很少用！
作者: tc    时间: 2012-6-9 23:25
好`我顶``顶顶
作者: C.R.CAN    时间: 2012-7-28 23:18
响应天帅号召，顶
作者: 晃晃    时间: 2012-7-31 23:19
其实楼主所说的这些，俺支很少用！




欢迎光临 纳金网 (http://go.narkii.com/club/) Powered by Discuz! X2.5