一道很老的前端笔试题
今天看了一个关于前端的笔试题(2010年的)有点老题目也不算难,在这里放上自己的解决方案。
1.用CSS实现布局
让我们一起来做一个页面
首先,我们需要一个布局。
请使用CSS控制3个div,实现如下图的布局
附上代码(全部写在一起):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> div{ border: 1px #000 solid; } #first{ width: 100px; height: 100px; margin-left: -310px; float: left; } #second{ width: 100px; height: 100px; margin-left: -310px; margin-top:110px; float: left; } #third{ width: 200px; height: 210px; margin-left:110px; float:left; } </style> <body> <div id="third"> </div> <div id="first"> </div> <div id="second"> </div> </body> </html>
2.用javascript优化布局
由于我们的用户群喜欢放大看页面,于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候,该区块会放大25%,并且其他的区块仍然固定不动
效果如下:
代码如下(jquery版):
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $("#first").mouseover(function(){ $("#first").animate({width:"150px",height:"150px"}); }) }) </script>
开始自己写了个运动框架发现无法同时传输多值,所以仿写了个json传输的代码以实现上述功能:
<script type="text/javascript">
function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fnEnd) { clearInterval(obj.timer); var attr; obj.timer=setInterval(function (){ var bStop=true; for(attr in json) { var iCur=0; iCur=parseInt(getStyle(obj, attr)); var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style[attr]=iCur+iSpeed+'px'; if(iCur!=json[attr]) { bStop=false; } } if(bStop) { clearInterval(obj.timer); if(fnEnd) { fnEnd(); } } }, 30); } window.onload=function(){ var oTest=document.getElementById("first"); oTest.onmouseover=function(){ startMove(this,{"width":"200","height":"200"},false); } } </script>
个人写的运动框架中传输的参数分别为move(obj,str,iTarget),所以只能过对单个参数进行操作,如果同时进行事件绑定,后面的事件会对上一个事件进行覆盖只显示后一个效果,代码如下:个人感觉还是json用的比较少所以才会造成第一印象传输单个值的思路:
function getStyle(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name];//ie } else { alert("1"); return getComputedStyle(obj,false)[name]; } }
function move(obj,str,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=0; curr=parseInt(getStyle(obj,str)); alert(curr); var iSpeed = (iTarget-curr)/8; if(iSpeed>0) iSpeed = Math.floor(iSpeed); else iSpeed = Math.ceil(iSpeed); if(curr==iTarget) { clearInterval(obj.timer); } else { obj.style[str]=curr+iSpeed+"px";
} },30) } window.onload=function(){ var oFrist = document.getElementById("first"); oFrist.onmouseover=function(){ move(this,"width",200); }; oFrist.onmouseover=function(){ move(this,"height",200); }; }