鼠标放在图片上显示大图的JS代码
时间:2024-04-28 10:20:08
显示大图和隐藏大图的js代码:
<script type="text/javascript">
//显示图片
function over(imgid,obj,imgbig)
{
//大图显示的最大尺寸 4比3的大小 400 300
maxwidth=400;
maxheight=300;
//显示
obj.style.display="";
imgbig.src=imgid.src;
//1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3
//2、如果宽超过了并且高没有超,设置宽为最大值
//3、如果宽没超过并且高超过了,设置高为最大值
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
if(pare>=0)
img.width=maxwidth;
else
img.height=maxheight;
}
else if(img.width>maxwidth&&img.height<=maxheight)
{
img.width=maxwidth;
}
else if(img.width<=maxwidth&&img.height>maxheight)
{
img.height=maxheight;
}
}
//隐藏图片
function out()
{
document.getElementById('divImage').style.display="none";
}
</script>
显示小图的image和显示大图的image:
<img id="img" src="https://www.aspxhome.com/images/logo.gif" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />
<%--显示大图标的区域--%>
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
<img id="imgbig" src="https://www.aspxhome.com/images/logo.gif" alt="预览" />
</div>
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
分类、属性、关键词与Tag
php计算给定日期所在周的开始日期和结束日期示例
vue3.0如何在全局挂载对象和方法
![](https://img.aspxhome.com/file/2023/0/126650_0s.png)
Python映射类型之dict详解
MySQL Innodb表导致死锁日志情况分析与归纳
![](https://img.aspxhome.com/file/2023/1/98391_0s.png)
pygame游戏之旅 载入小车图片、更新窗口
![](https://img.aspxhome.com/file/2023/5/86425_0s.png)
python实现清屏的方法
Python Pygame实战之实现经营类游戏梦想小镇代码版
![](https://img.aspxhome.com/file/2023/7/113027_0s.png)
python apscheduler cron定时任务触发接口自动化巡检过程
![](https://img.aspxhome.com/file/2023/2/111972_0s.jpg)
MySQL联表查询基本操作之left-join常见的坑
请给PNG8一个机会:对png8的误解
Python中的字符串查找操作方法总结
一文秒懂python读写csv xml json文件各种骚操作
Python argparse模块应用实例解析
Oracle回滚段的概念,用法和规划及问题的解决
php设置编码格式的方法
Django url.py path name同一app下路由别名定义
![](https://img.aspxhome.com/file/2023/4/131304_0s.png)