鼠标放在图片上显示大图的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简单表格编辑功能实现方法
Apr 16 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
three.js 入门案例详解
Jan 23 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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&amp;mysql(二)
2006/10/09 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php自定义分页类完整实例
2015/12/25 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js日期联动示例
2014/05/02 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
jstree的简单实例
2016/12/01 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python 实现倒排索引的方法
2018/12/25 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Django中modelform组件实例用法总结
2020/02/10 Python
求职信怎么写
2014/05/23 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
导游词之清晏园
2019/11/22 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL