您的位置：首页 > Web前端 > CSS

DIV布局和放大

2016-02-20 08:56 495 查看
题目：当鼠标略过某个区块的时候，该区块会放大，并且其他的区块仍然固定不动

布局：



<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三个div放大问题</title>
<style>
*{
margin:0;
padding:0;
}
div{
position:absolute;
margin:0 auto;
}
#top{
width:100px;
height:250px;
background:pink;

}

#bottom{
top:260px;
width:100px;
height:250px;
background:cornflowerblue;

}
#right{
left:110px;
width:300px;
height:510px;
background:greenyellow;

}
</style>
</head>
<body>
<div>
<div id="top"></div>
<div id="bottom"></div>
<div id="right"></div>
</div>
</body>
<script>
function zoom(id,x,y){
var obj=document.getElementById(id);//得到对象
var dw=obj.clientWidth;//获取宽度
var dh=obj.clientHeight;//获取高度
obj.onmouseover=function(){//鼠标移上函数
this.style.width=dw*x+'px';//宽度改变
this.style.height=dh*y+'px';//高度改变
4000

this.style.zIndex=1;//设置Z轴优先
}
obj.onmouseout=function(){//鼠标移开函数
this.style.width="";//恢复默认值
this.style.height="";
this.style.zIndex="";
}
}
zoom("top",1.25,1.25);//调用放大函数
zoom("bottom",1.25,1.25);
zoom("right",1.25,1.25);
</script>
</html>


注：绝对布局和float浮动不能混用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  div布局 js css
相关文章推荐
新的分享
章节导航