鼠标放在图片上显示大图的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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php权重计算方法代码分享
2014/01/09 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python自定义异常实例详解
2017/07/11 Python
python游戏地图最短路径求解
2019/01/16 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Pycharm调试程序技巧小结
2020/08/08 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
创建文明学校实施方案
2014/03/11 职场文书
求职信范文大全
2014/05/26 职场文书
工地质量标语
2014/06/12 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
小学教师工作总结2015
2015/04/07 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技