- 最后登录
- 2013-7-18
- 注册时间
- 2011-7-16
- 阅读权限
- 70
- 积分
- 3247
 
- 纳金币
- 324742
- 精华
- 0
|
烈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
|
|
发表于 2011-12-30 19:25:10
QQ好友和群
腾讯微博
腾讯朋友
微信
转播
淘帖
收藏
支持
反对