鼠标放在图片上显示大图的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>


标签:图片,大图
0
投稿

猜你喜欢

  • 分类、属性、关键词与Tag

    2009-08-27 12:57:00
  • php计算给定日期所在周的开始日期和结束日期示例

    2023-10-11 12:49:12
  • vue3.0如何在全局挂载对象和方法

    2024-05-13 09:07:59
  • Python映射类型之dict详解

    2023-08-03 13:19:19
  • MySQL Innodb表导致死锁日志情况分析与归纳

    2024-01-27 04:04:42
  • pygame游戏之旅 载入小车图片、更新窗口

    2022-08-06 18:12:39
  • python实现清屏的方法

    2021-11-02 04:10:32
  • Python Pygame实战之实现经营类游戏梦想小镇代码版

    2021-08-06 19:13:23
  • python apscheduler cron定时任务触发接口自动化巡检过程

    2023-01-04 19:52:50
  • MySQL联表查询基本操作之left-join常见的坑

    2024-01-14 20:49:22
  • 请给PNG8一个机会:对png8的误解

    2009-09-21 10:45:00
  • Python中的字符串查找操作方法总结

    2021-06-13 12:21:46
  • 一文秒懂python读写csv xml json文件各种骚操作

    2023-08-03 23:50:42
  • Python argparse模块应用实例解析

    2023-08-29 12:44:52
  • Oracle回滚段的概念,用法和规划及问题的解决

    2010-07-26 13:08:00
  • php设置编码格式的方法

    2023-11-14 12:01:22
  • Django url.py path name同一app下路由别名定义

    2023-01-24 23:46:36
  • 解决python 找不到module的问题

    2022-08-05 07:33:25
  • python石头剪刀布小游戏(三局两胜制)

    2021-07-24 00:06:30
  • Go语言实现请求超时处理的方法总结

    2024-04-23 09:37:50
  • asp之家 网络编程 m.aspxhome.com