鼠标放在图片上显示大图的JS代码


Posted in Javascript onMarch 26, 2013

显示大图和隐藏大图的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://3water.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://3water.com/images/logo.gif" alt="预览" />
    </div>
Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 #Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 #Javascript
javascript变量作用域使用中常见错误总结
Mar 26 #Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 #Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 #Javascript
jquery 无限级联菜单案例分享
Mar 26 #Javascript
JSON辅助格式化处理方法
Mar 26 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
php上传文件问题汇总
2015/01/30 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
无偿献血倡议书
2014/04/14 职场文书
师德师风自查总结
2014/10/14 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
刑事申诉状范文
2015/05/20 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
AngularJS实现多级下拉框
2022/03/25 Javascript