一道很老的前端笔试题

今天看了一个关于前端的笔试题（2010年的）有点老题目也不算难，在这里放上自己的解决方案。

1.用CSS实现布局

让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局

css效果

附上代码（全部写在一起）： 

<!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);
    };
}

posted on 2013-09-04 12:51  前端小码农  阅读(282)  评论(0)  编辑  收藏  举报

导航