招聘版一题目,大家来讨论下实现方法

EGGS [楼主]

初级会员

帖子: 270
体力: 145
威望: 3
离线: 431 天

1^# 大中小发表于 2006-10-26 15:27

原题:

1. Javascript

页面上实现四个层：

1 | 2
---+---
3 | 4

随机把这四个层的内容交换显示，边界可以调整大小，如：

  2 | 1
------+
  4 |
   +---
   | 3
   |

我觉得这个题目具有一定的代表性。

下面是我做的实现方案。支持ie6+/Firefox1.x+

<!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"  xml:lang="zh-CN" lang="zh-CN">
<head>
<title> 4box demo </title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}
#mainContainor{
	width:700px;
	height:400px;
	color:#FFFFFF;
	background-color:#cccccc;
}
#Controls{
	display:none;
	position:relative;
}
#leftCol{
	float:left;
	width:250px;
	height:100%;
}
#rightCol{
	float:left;
	width:450px;
	height:100%;
}
#centerControl{
	left:250px;
	top:0px;
	width:4px;
	height:400px;
	background-color:#00ff00;
	overflow:hidden;
	position:absolute;
	cursor:E-resize
}
#leftControl{
	left:0px;
	top:150px;
	width:250px;
	height:4px;
	background-color:#00ffff;
	overflow:hidden;
	position:absolute;
	cursor:N-resize
}
#rightControl{
	left:250px;
	top:150px;
	width:450px;
	height:4px;
	background-color:#00ffff;
	overflow:hidden;
	position:absolute;
	cursor:N-resize
}
#box1{
	width:100%;
	height:150px;
	background-color:#660000;
}
#box2{
	width:100%;
	height:250px;
	background-color:#666600;
}
#box3{
	width:100%;
	height:150px;
	background-color:#000066;
}
#box4{
	width:100%;
	height:250px;
	background-color:#666666;
}
</style>
<script type="text/javascript">
// copy from prototype.js
function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1) 
      return element;
    elements.push(element);
  }
  return elements;
}
//init 4 box
var mainWidth=700;
var mainHeight=400;
var minWidth=100;
var minHeight=60;
var con_c;
var con_l;
var con_r;
var div_main;
var div_cons;
var div_left;
var div_right;
var box1;
var box2;
var box3;
var box4;
var ContentArray;
function init4box(){
	//缓存HTML对象引用
	con_c=$("centerControl");
	con_l=$("leftControl");
	con_r=$("rightControl");
	div_main=$("mainContainor");
	div_cons=$("Controls");
	div_left=$("leftCol");
	div_right=$("rightCol");
	box1=$("box1");
	box2=$("box2");
	box3=$("box3");
	box4=$("box4");
	//随机交换区块内容;
	function RandomContent(){
		ContentArray=new Array();
		ContentArray.push(box1.innerHTML);
		ContentArray.push(box2.innerHTML);
		ContentArray.push(box3.innerHTML);
		ContentArray.push(box4.innerHTML);
		for(var i=0;i<4;i++){
			var index=parseInt(Math.random()*ContentArray.length);
			$("box"+(i+1)).innerHTML=ContentArray[index];
			ContentArray.splice(index,1);
		}
	}
	//鼠标移过出现边界调整控制条
	div_main.onmouseover=function(){
		div_cons.style.display="block";
	}
	div_main.onmouseout=function(){
		div_cons.style.display="none";
	}
	
	// 边界调整鼠标事件绑定
	con_c.onmousedown=function(){
		div_main.onmousemove=function(aEvent){
			var myEvent = window.event ? window.event : aEvent;
			var x=myEvent.clientX;
			if(x<minWidth || mainWidth-x < minWidth) return;
			con_c.style.left=x-2+"px";
			div_left.style.width=x+"px";
			div_right.style.width=mainWidth-x+"px";
			con_l.style.width=x+"px";
			con_r.style.left=x+"px";
			con_r.style.width=div_right.style.width;
		}
		div_main.onmouseup=function(){
			div_main.onmousemove=null;
		}
	}
	con_l.onmousedown=function(){
		div_main.onmousemove=function(aEvent){
			var myEvent = window.event ? window.event : aEvent;
			var y=myEvent.clientY;
			if(y<minHeight || mainHeight-y < minHeight) return;
			con_l.style.top=y-2+"px";
			box1.style.height=y+"px";
			box2.style.height=mainHeight-y+"px";
		}
		div_main.onmouseup=function(){
			div_main.onmousemove=null;
		}			
	}
	con_r.onmousedown=function(){
		div_main.onmousemove=function(aEvent){
			var myEvent = window.event ? window.event : aEvent;
			var y=myEvent.clientY;
			if(y<minHeight || mainHeight-y < minHeight) return;
			con_r.style.top=y-2+"px";
			box3.style.height=y+"px";
			box4.style.height=mainHeight-y+"px";
		}
		div_main.onmouseup=function(){
			div_main.onmousemove=null;
		}			
	}
	
	//
	RandomContent();
}
window.onload=init4box;
</script>
</head>
<body>
<div id="mainContainor">
	<div id="Controls">
		<div id="leftControl"></div>
		<div id="rightControl"></div>
		<div id="centerControl"></div>
	</div>
	<span id="leftCol">
		<div id="box1">1 1 1</div>
		<div id="box2">2 2 2</div>
	</span>
	<span id="rightCol">
		<div id="box3">3 3 3</div>
		<div id="box4">4 4 4</div>
	</span>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

大家不妨讨论下其他实现方法，或者如何应用到网站带给用户良好的体验。

本帖最近评分记录

marvellous 威望 +3 原创内容 2006-10-26 15:47

eggs=egg,egg,egg...

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

‹‹ 上一主题 | 下一主题 ››