鼠标指向div后变大25%

最新推荐文章于 2023-11-07 00:15:00 发布

转载最新推荐文章于 2023-11-07 00:15:00 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wukall/p/5740971.html

本文介绍了一种使用CSS绝对定位实现的三栏布局方法，并通过JavaScript实现了元素的鼠标悬停放大效果。提供了完整的代码示例及在线演示链接。

两个方面。

1.21布局，推荐position:absolute;(此题要求3个div),左边两个position:absolute;设置好top与left。右边div设置好margin。

2.js部分

window.onload=function(){
    var obj1=document.getElementById("box1");
    var obj2=document.getElementById("box2");
    var obj3=document.getElementById("box3");
    function zoom(obj,x,y){
    var dW=obj.clientWidth;//get width
    var dH=obj.clientHeight;//get height
    obj.onmouseover=function(){
    obj.style.width=dW*x+"px";
    obj.style.height=dH*y+"px";
    obj.style.zIndex=2;
    }
    obj.onmouseout=function(){
    obj.style.width="";
    obj.style.height="";
    obj.style.zIndex="";
    }
    }
    zoom(obj1,1,25,1,25);
    zoom(obj2,1,25,1,25);
    zoom(obj3,1,25,1,25);
}