您的位置：首页 > Web前端 > JavaScript

js 图片拖动复制

2007-07-12 15:20 295 查看

实现效果：
1.拖动母图片imgA
2.拖动母图片的“复制”后的新图片
3.新图片亦支持再次的复制新图片
附：
下面的示例代码可以直接拷贝和运行
以查看相关效果
-------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>js 图片拖动复制</title>
<script language=javascript>

var Obj;

function DragStart(obj)
{
//去年复制部分
//可以在母图片imgA 加onmousemove=MouseMove()
//onmouseup=MouseUp() 则只是拖动图片
//---------复制开始----------
var i=0;
var newName = obj.id+"1";
while(document.all(newName)!=null)
{
i++;
newName = obj.id+i;
}
var strHTML = "<img id='"+newName+"' src='" +obj.src+"'";
//放开此句则新的图片亦支持拖动复制
//不放开则只有母图片imgA支持拖动复制
strHTML+= " ondragstart=DragStart(this) ";
strHTML+= " onmousemove=MouseMove() ";
strHTML+= " onmouseup=MouseUp() ";
strHTML+= " style='position:absolute; ";
strHTML+= " top:"+obj.style.top+"; left:"+obj.style.left+"' ";
strHTML+= " /> ";
obj.parentElement.innerHTML += strHTML;
Obj=document.all(newName);
//---------复制结束----------

//Obj = obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}

function MouseMove()
{
if(Obj!=null)
{
Obj.style.left = event.x-Obj.l;
Obj.style.top = event.y-Obj.t;
}
}

function MouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture();
Obj=null;
}
}

</script>

</head>
<body>
<form id="form1" runat="server">
<img id="imgA" src="01.bmp" ondragstart=DragStart(this)
style="position:absolute; top:100px; left:100px;" />
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

js 图片 拖动 复制

js 图片拖动复制