鼠标放在图片上显示大图的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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python装饰器语法糖
2019/01/02 Python
python微信撤回监测代码
2019/04/29 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
铭立家具面试题
2012/12/06 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
作为网站管理者应当如何防范XSS
2014/08/16 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
小学生秋游活动方案
2014/02/23 职场文书
《满井游记》教学反思
2014/02/26 职场文书
环保建议书作文
2014/03/12 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技