DIV布局和放大

最新推荐文章于 2024-04-23 15:10:09 发布

辣姐什么鬼

最新推荐文章于 2024-04-23 15:10:09 发布

阅读量678

点赞数

分类专栏： js web前端 css 文章标签： div布局 js css

web前端同时被 3 个专栏收录

174 篇文章 7 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

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

布局：

<!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浮动不能混用