zoukankan      html  css  js  c++  java
  • 一道二栏布局题目

    这是2008年阿里巴巴前端开发工程师一道布局题。

    image

    现在的要求是C必须先于A、B节点之前,如何实现?

    类似于下面的结构:

    <div id="wrapper">
        <div>C</div>
        <div>A</div>
        <div>B</div>
    </div>

    请思考……..

    我的解答:

    <!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>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta http-equiv='content-type' content='text/html;charset=utf-8' />
      <style type='text/css'>
    	* {margin:0; padding:0;}
    	body {background-color:#fff;}
    
    	#wrapper {400px;margin:100px; border:1px solid #ff0000;}
    	#wrapper:after {content:"."; height:0; line-height:0; visibility:hidden; overflow:hidden; display:block; clear:both;}
    	
    	#content,#secondPrimary,#extra{background-color:#CDD8DA; text-align:center; position:relative;}
    	
    	#primary {100%; float:right; margin-left:-200px;}
    	#content {margin-left:210px; height:500px; line-height:500px;}
    	#secondPrimary {float:left; 200px; height:300px; line-height:300px;}
    	#extra {clear:float; float:left;  height:190px; 200px; margin-top:10px; line-height:190px;}
    	
    	.current {background-color:#DDF8C0; position:absolute; top:0; left:0;}
      </style>
     </head>
    
     <body>
    
    <div id="wrapper">
    	<div id="primary">
    		<div id='content'>
    			<div>C</div>
    		</div>
    	</div>
    
    	<div id="secondPrimary">
    		<div>A</div>
    	</div>
    	<div id="extra">
    		<div>B</div>
    	</div>
    </div>
    
    
    <script type="text/javascript">
    	function $(id) {
    		return typeof id === 'string' ? document.getElementById(id) : id;
    	}
    	
    	var Event = {
    		
    		add : function(el, handler, fn) {
    			handler = handler.replace(/^on/, "").toLowerCase();
    			
    			if(el.attachEvent) {
    				el.attachEvent("on" + handler, fn);
    			} else {
    				el.addEventListener(handler, fn, false);
    			}
    
    			return el;
    		},
    		remove : function(el, handler, fn) {
    			handler = handler.replace(/^on/, "").toLowerCase();
    			
    			if(el.detachEvent) {
    				el.detachEvent("on" + handler, fn);
    			} else {
    				el.removeEventListener(handler, fn, false);
    			}
    
    			return el;
    		},
    		removeAll : function() {
    			
    		}
    	};
    
    	var Dom = {
    		getParent : function(node) {
    			if(!node) {
    				return null;
    			}
    
    			var parent = !!node.parentNode && node.parentNode.nodeType == 1 ? node.parentNode : null;
    
    			if(!parent) {
    				while (parent) {
    					parent = parent.parentNode;
    
    					if(!!parent && parent.nodeType == 1) {
    						break;
    					}
    				}
    			}
    
    			return parent;
    		},
    		getFirstChild : function(node) {
    			if (!node) {
    				return null;
    			}
    			var child = !!node.firstChild && node.firstChild.nodeType == 1 ? node.firstChild : null;
    
    			return child || this.getNextSibling(node.firstChild);
    		},
    		getNextSibling : function(node) {
    			if(!node) {
    				return null;
    			}
    
    			while (node) {
    				node = node.nextSibling;
    
    				if(!!node && node.nodeType == 1) {
    					return node;
    				}
    			}
    
    			return null;
    		},
    		/**
    		* 判断指定的节点是否是第二个节点的祖先
    		*/
    		isAncestor : function(node1, node2) {
    			if(!node1 || !node2) {
    				return false;
    			}
    
    			return node1.contains ? (node1 != node2 && node1.contains(node2)) : !!(node1.compareDocumentPosition(node2) & 16);
    		}
    	}
    	
    	function zoomIn(ev, rate) {
    		
    		if (!this._w) {
    			this._w = this._w || this.offsetWidth;
    			this._h = this._h || this.offsetHeight;
    		}	
    
    		this.style.zIndex = 1;
    		
    		var child = Dom.getFirstChild(this);
    		child.className = "current";
    
    		child.style.width = this.offsetWidth * rate + "px";
    		child.style.height = this.offsetHeight * rate + "px";
    		child.style.lineHeight = this.offsetHeight * rate + "px";
    	}
    
    	function zoomOut(ev, rate) {
    		this.style.zIndex = 0;
    
    		var child = Dom.getFirstChild(this);
    		child.className = "";
    
    		child.style.width = '100%';
    		child.style.height = '100%';
    		child.style.lineHeight = this._h + 'px';
    	}
    
    	!(function() {
    		var a = $("content"), b = $("secondPrimary"), c = $("extra");
    
    		var arr = [a, b, c], tempEl = null, zoomRate = 1.2;
    
    		for (var i = 0,len = arr.length; i<len;i++) {
    			tempEl = arr[i];
    			
    			//绑定mouseover事件
    			Event.add(tempEl, 'mouseover', function(el, rate) {
    				return function() {
    					var args = Array.prototype.slice.call(arguments).concat([rate]);
    
    					return zoomIn.apply(el, args);
    				}
    			}(tempEl, zoomRate));
    			
    			//绑定mouseout事件
    			Event.add(tempEl, 'mouseout', function(el, rate) {
    				return function() {
    					var args = Array.prototype.slice.call(arguments).concat([rate]);
    
    					return zoomOut.apply(el, args);
    				}
    			}(tempEl, zoomRate));
    		}
    		
    		a = b = c = arr = tempEl = zoomRate = null;
    	})();
    	
    </script>
    
     </body>
    </html>

    运行实例,查看效果:

  • 相关阅读:
    atitit.ntfs ext 文件系统新特性对比
    Atitit.图片木马的原理与防范 attilax 总结
    Atitit.图片木马的原理与防范 attilax 总结
    Atitit.jdk java8的语法特性详解 attilax 总结
    Atitit.jdk java8的语法特性详解 attilax 总结
    Atitit.远程接口 监控与木马   常用的api 标准化v2 q216
    Atitit.远程接口 监控与木马   常用的api 标准化v2 q216
    Atitit..jdk java 各版本新特性 1.0 1.1 1.2 1.3 1.4 1.5(5.0) 1.6(6.0) 7.0 8.0 9.0 attilax 大总结
    Atitit..jdk java 各版本新特性 1.0 1.1 1.2 1.3 1.4 1.5(5.0) 1.6(6.0) 7.0 8.0 9.0 attilax 大总结
    Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216  java c# php js.docx
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/1851164.html
Copyright © 2011-2022 走看看