经典前端面试题

最新推荐文章于 2019-10-21 15:03:43 发布

原创最新推荐文章于 2019-10-21 15:03:43 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

本文通过CSS实现了一个特定布局，并利用JavaScript增强了用户体验，当鼠标悬停在布局块上时，该块将放大25%，同时保持其他部分位置不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用CSS实现布局

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

2.用JavaScript优化布局

由于我们的用户群喜欢放大看页面，于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动

效果如下：

解答；<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">

/*仅是为了方便观看而设置的容器div*/
#container{
position:relative;
margin: 200px auto;
width:300px;
height:300px;
}

/*通用背景色，我想笔试的时候这个应该无所谓的，hoverEnlarge类只是为了第二题而添加的*/
.hoverEnlarge {
background: #CDD8DA;
}

.leftTopColumn {
position: absolute;
width: 90px;
height: 150px;
z-index: 999;

}

.leftBottomColumn {
position: absolute;
width: 90px;
height: 115px;
margin-top: 157px;
z-index: 998;
}

.rightColumn {
position:absolute;
left: 97px;
width: 215px;
height: 270px;
}
</style>
<script type="text/javascript">
/*放大函数*/
window.onload=function(){
var enlarge = function(elem, level){
var w = elem.clientWidth,
h = elem.clientHeight;
elem.style.width = Math.round(w * level) + 'px';
elem.style.height = Math.round(h * level) + 'px';
elem.style.backgroundColor = '#DDF8C0';
},
/*缩小函数*/
shrink = function(elem, level){
elem.style.width = '';
elem.style.height = '';
elem.style.backgroundColor = '';
},

ctn = document.getElementById('container');

ctn.onmouseover = function(evt){
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if(target.className.indexOf('hoverEnlarge') !== -1){
enlarge(target, 1.25);
}
};

ctn.onmouseout = function(evt){
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if(target.className.indexOf('hoverEnlarge') !== -1){
shrink(target, 1.25);
}
}; }
</script>
</head>
<body>
<div id="container">
<div class="leftTopColumn hoverEnlarge"></div>
<div class="leftBottomColumn hoverEnlarge"></div>
<div class="rightColumn hoverEnlarge"></div>
</div>
</body>
</html>