个人空间动态设定布局演示（一），兼容IE fire

google的个性化主页想必给web程序员留下了较为深刻的印象吧。基于web的可定制界面是现在个性化发展的趋势。我们在课程中也引入了相关教学内容帮助学员尽快掌握这种技术。

图片1

下面是源代码与设计分析。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态设计个人空间布局演示 www.phpchengdu.com 罗维</title>
<link href="index.css" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" _fcksavedurl=""index.css"" type="text/css" rel="stylesheet" />
</head>
<body onSelectStart="return(false)">
<span id="span1">个人空间动态设定布局演示（一），兼容IE firefox。www.phpchengdu.com 罗维</span><input type="button" value="save" onclick="show()" />
<div myclass='movable' style="position:absolute;width:300px;height:300px;">
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>
<div myclass='movable'>
</div>

</body>
</html>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
//第一次进入时，先从后台读取用户上一次的布局参数，如果没有，则按标准的方式显示
var isMouseDown=false;
var currentDiv=null;
var objDivArray=document.getElementsByTagName("div");
var columns=3;
var initWidth=document.body.clientWidth/columns-10,initHeight=300,initTop=50,initLeft=1;
for(var i=0,m=0,n=0;i<objDivArray.length;i++){
objDivArray[i].id=i;
objDivArray[i].style.position='absolute';
objDivArray[i].style.width=initWidth+'px';
objDivArray[i].style.height=initHeight+'px';
//alert(objDivArray[i].style.height);
objDivArray[i].style.border='solid 1px #C5D9F1';
//必须加底色，否则事件无法在整个区域内激活
objDivArray[i].style.backgroundColor="#FFFFFF";
//每咯columns才换一次行
if(n>=columns){
  m++;
  n=0;
}
objDivArray[i].style.top=m*initHeight+initTop+m*10+'px';
objDivArray[i].style.left=n*initWidth+initLeft+n*10+'px';
　 objDivArray[i].innerHTML=i;
　 objDivArray[i].zIndex=0;//兼容firefox;
objDivArray[i].onmousedown=function(e){
  var event=window.event||e;
  var srcElement=event.srcElement||event.target;
  divOnMouseDown(srcElement,event);
  //alert(srcElement.id);
}
objDivArray[i].onmouseup=function(e){
  var event=window.event||e;
  var srcElement=event.srcElement||event.target;
  divOnMouseUp(srcElement);
  //alert(srcElement.id);
}
objDivArray[i].onmouseout=function(e){
  var event=window.event||e;
  var srcElement=event.srcElement||event.target;
  divOnMouseOut(srcElement);
  //alert(srcElement.id);
}
objDivArray[i].onmousemove=function(e){
  var event=window.event||e;
  var srcElement=event.srcElement||event.target;
  divOnMouseMove(srcElement,event);
  //alert(srcElement.id);
}
n++;
}
</script>

搜索

个人空间动态设定布局演示（一），兼容IE fire