无意中看到此题,做一下玩玩: HTML: <style> *{ margin:0; padding:0;} .box { position:relative; width:315px; height:279px;} #box1,#box2,#box3 { background-color:#CDD8DA; text-align:center; font-weight:bold;} #box1 { position:absolute; left:0; top:0; width:90px; height:153px; line-height:153px;} #box2 { position:absolute; left:0; bottom:0; width:90px; height:119px; line-height:119px;} #box3 { position:absolute; right:0; bottom:0; width:217px; height:279px; line-height:279px;} </style> <body> <div class="box"> <div id="box1">A</div> <div id="box2">B</div> <div id="box3">C</div> </div> </body> </html> js: function hoverBig(x){ var x = document.getElementById(x); var w = x.clientWidth; var h = x.clientHeight; var bW = Math.floor( w * 1.25 ); var bH = Math.floor( h * 1.25 ); x.onmouseover = function(){ x.style.backgroundColor = "#DDF8C0"; x.style.width = bW + "px"; x.style.height = bH + "px"; x.style.zIndex = 100; } x.onmouseout = function(){ x.style.backgroundColor = "#CDD8DA"; x.style.width = w + "px"; x.style.height = h + "px"; x.style.zIndex = 1; } } hoverBig("box1"); hoverBig("box2"); hoverBig("box3");
本文介绍了一个使用纯CSS实现的特殊布局案例，并通过JavaScript增强了交互体验，实现了元素鼠标悬停时的放大效果。
扫一扫
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
