想作像QQ家园那样的效果

lancelord 2004-04-09 02:05:26

就像QQ家园里面，可以随意拖动图片，改变方向和层次，其原理是什么？有原码更好了，语言不限，反正都是学习。

...全文

121 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

lancelord 2004-04-09

打赏
举报

还有关于保存已更改动作以及变换图片方向、层叠的问题…………，保存应该可以的，那么关于层叠咧？

swich 2004-04-09

打赏
举报

可以框选移动的层代码

把图片放在层上即可


<html>
<head>
<title>selectarea</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
var x0;
var y0;
var objlayer=new Array();
objlayer[0]="Layer1";
objlayer[1]="Layer2";

var selectenable=0;
function initselect() {
if (event.srcElement!=selectarea) {
x0=document.body.scrollLeft+event.clientX;
y0=document.body.scrollTop+event.clientY;
selectenable=1;
}
}
function startselect() {
if (selectenable==1) {
selectarea.style.visibility='visible';
if(document.body.scrollLeft+event.clientX-x0>0) {
selectarea.style.left=x0;
selectarea.style.width=document.body.scrollLeft+event.clientX-x0;
}
else
{
selectarea.style.left=document.body.scrollLeft+event.clientX;
selectarea.style.width=x0-(document.body.scrollLeft+event.clientX);
}
if (document.body.scrollTop+event.clientY-y0>0) {
selectarea.style.top=y0;
selectarea.style.height=document.body.scrollTop+event.clientY-y0;
}
else
{
selectarea.style.top=document.body.scrollTop+event.clientY;
selectarea.style.height=y0-(document.body.scrollTop+event.clientY);
}
}
}

var dx=new Array();
var dy=new Array();
var dragenable2=new Array();
function endselect() {
selectenable=0;
//start
for (i=0; i<objlayer.length; i++) {
layername=eval(objlayer[i]);
var dx2=(selectarea.offsetLeft+selectarea.offsetWidth)-(layername.offsetLeft+layername.offsetWidth);
var dy2=(selectarea.offsetTop+selectarea.offsetHeight)-(layername.offsetTop+layername.offsetHeight);
if (selectarea.offsetLeft-1<layername.offsetLeft && dx2>-1 && selectarea.offsetTop-1<layername.offsetTop && dy2>-1) {
dx[i]=layername.offsetLeft-selectarea.offsetLeft;
dy[i]=layername.offsetTop-selectarea.offsetTop;
dragenable2[i]=1;
}
else {dx[i]=0;dy[i]=0;dragenable2[i]=0;}
}
window.status=dragenable2+':'+dx+':'+dy;
//end
}

function hideselect() {
if (document.body.scrollLeft+event.clientX==x0 && document.body.scrollTop+event.clientY==y0 && event.srcElement!=selectarea)
selectarea.style.visibility='hidden';
}

var xx0;
var yy0;
var dragenable=0;
function initdrag() {
xx0=document.body.scrollLeft+event.clientX-selectarea.offsetLeft;
yy0=document.body.scrollTop+event.clientY-selectarea.offsetTop;
dragenable=1;
}

function startdrag() {
if (dragenable==1) {
selectarea.style.left=document.body.scrollLeft+event.clientX-xx0;
selectarea.style.top=document.body.scrollTop+event.clientY-yy0;
for (i=0; i<objlayer.length; i++) {
layername=eval(objlayer[i]);
if (dragenable2[i]==1) {
layername.style.left=selectarea.offsetLeft+dx[i];
layername.style.top=selectarea.offsetTop+dy[i];
}
}
window.status=dx+':'+dy+':'+dragenable2;
}
}

function enddrag() {
dragenable=0;
for (i=0; i<objlayer.length; i++) {dragenable2[i]=0;}
}
</script>
<link rel="stylesheet" href="images/test.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000" onmousedown="initselect()" onmousemove="startselect();startdrag()" onmouseup="endselect()" onclick="hideselect()" onselectstart="return false;">
<div id="selectarea" style="cursor:move;position:absolute; width:0px; height:0px; z-index:100; left: 0px; top: 0px;border:1px #000000 dashed ;visibility:hidden" onmousedown=initdrag() onmousemove=startdrag() onmouseup=enddrag()><img src=spacer.gif width=1 height=1></div>

<div id="Layer1" style="position:absolute; width:100px; height:100px; z-index:1; left: 50px; top: 50px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td align="center" bgcolor="#CCCCCC">obj1</td>
</tr>
</tbody>
</table>
</div>
<div id="Layer2" style="position:absolute; width:100px; height:100px; z-index:1; left: 240px; top: 50px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td align="center" bgcolor="#000066"><font color="#FFFFFF">obj2</font></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

shanxing 2004-04-09