可拖动图片

最新推荐文章于 2022-07-19 17:09:49 发布

PeterHu001

最新推荐文章于 2022-07-19 17:09:49 发布

阅读量734

点赞数 1

分类专栏： WEB开发表单特效文章标签： function javascript generator html border div

本文链接：https://blog.csdn.net/hupitao/article/details/7816235

版权

WEB开发同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

表单特效

4 篇文章 0 订阅

订阅专栏

最近在看javascript，用javascript实现了可拖动图片。可以直接把以下代码复制，使用。只需将图片的src更改成你自己的图片的src即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#div1{
overflow:hidden;
position:absolute;
width:400px;
height:200px;
left:100px;
top:100px;
border:5px solid #000;
}
img{
border:1px solid #000;
}
</style>
<script type="text/javascript">
//<![CDATA[
var dragObject = null;
var mouseOffset = null;

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

function mousePoint(x,y){
this.x = x;
this.y = y;
}

function mousePosition(evnt){
var x = parseInt(evnt.clientX);
var y = parseInt(evnt.clientY);
return new mousePoint(x,y);
}

function getMouseOffset(target,evnt){
evnt = evnt || window.event;
var mousePos = mousePosition(evnt);

var x = mousePos.x - target.offsetLeft;
var y = mousePos.y - target.offsetTop;

return new mousePoint(x,y);
}

function mouseUp(evnt){
dragObject = null;
}

function mouseMove(evnt){
if(!dragObject)return;
evnt = evnt || window.event;
var mousePos = mousePosition(evnt);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y -mouseOffset.y + "px";
dragObject.style.left = mousePos.x -mouseOffset.x + "px";
return false;
}
}

function makeDraggable(item){
if(item){
item = document.getElementById(item);
item.onmousedown = function(evnt){
dragObject = this;
mouseOffset = getMouseOffset(this,evnt);
return false;
}
}
}
//]]>
</script>
</HEAD>

<BODY οnlοad="makeDraggable('img1');">
<div id="div1">
<img id="img1" src="img/test.BMP"/>
</div>
</BODY>
</HTML>

PeterHu001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可拖动图片

最近在看javascript，用javascript实现了可拖动图片。可以直接把以下代码复制，使用。只需将图片的src更改成你自己的图片的src即可。 New Document #div1{overflow:hidden;position:absolute;width:400px;height:200px;
复制链接

扫一扫