DIV布局和放大

来源：互联网发布：网红店经济模式知乎编辑：程序博客网时间：2024/05/22 05:04

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

布局：

<!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';//高度改变            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浮动不能混用

0 0