鼠标放在图片上显示大图的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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
使用javascript获取页面名称
Dec 23 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 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 七大优势分析
2009/06/23 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript使用cookie
2007/02/02 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python爬取音频下载的示例代码
2020/10/19 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
应聘护士自荐信
2013/10/21 职场文书
总结会主持词
2015/07/02 职场文书
捐书仪式主持词
2015/07/04 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android