用js实现的一个小程序（对一块区域的放大，缩小）

最新推荐文章于 2020-10-14 14:15:39 发布

diaoan8655

最新推荐文章于 2020-10-14 14:15:39 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fangdx/p/3645386.html

本文介绍如何使用CSS和JavaScript来实现网页元素的动态放大效果。通过设置元素的初始位置、尺寸和边界，结合鼠标悬停事件，调整元素宽度、高度及背景颜色，实现交互式的视觉变化。

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

//css

#enlarge1{position:absolute;width:100px; height:100px; border:1px solid #000;}
#enlarge2{position:absolute; top:100px; width:100px; height:200px ;margin-top:20px; border:1px solid #000; }
#enlarge3{position:absolute; top:10px; left:110px;width:200px; height:312px; margin-left:10px; margin-top:-2px; border:1px solid #000; }
</style>

//html

//js

option.onmouseover=function(){
this.style.width=optionWidth*x+"px";
this.style.height=optionHeight*y+"px";
this.style.background="#0f0";
this.style.zIndex=100000;
}
option.onmouseout=function(){
this.style.width=optionWidth+"px";
this.style.height=optionHeight+"px";
this.style.background="";
this.style.zIndex="auto";
}

}
enlargeFc("enlarge2",1,1);
</script>

//效果