鼠标滑过放大图片%

最新推荐文章于 2023-12-04 14:12:12 发布

yuzhongkai

最新推荐文章于 2023-12-04 14:12:12 发布

阅读量645

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的简单元素缩放效果方法。通过鼠标移入和移出事件改变指定HTML元素的尺寸和样式，适用于网页互动设计。文章提供了具体实现代码，包括如何设置缩放函数及应用到不同元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
    var obj=document.getElementById(id); // 获取元素对象值
    var dW=obj.offsetWidth; // 获取元素宽度
    var dH=obj.offsetHeight; // 获取元素高度
    //var oTop=obj.offsetTop;
    //var oLeft=obj.offsetLeft;
    obj.onmouseover=function(){ // 鼠标移入
        this.style.width=dW*x+"px"; // 横向缩放
        this.style.height=dH*y+"px"; // 纵向缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
        this.style.zIndex=1; // 设置z轴优先
    }
    obj.onmouseout=function(){ // 鼠标移出，设回默认值
        this.style.width="";
        this.style.height="";
        this.style.padding="";
        this.style.backgroundColor="";
        this.style.zIndex="";
    }
}
zoom("m",1.25,1.25);
zoom("y",1.25,1.25);
zoom("c",1.25,1.25);