鼠标放在图片上显示大图的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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
js初始化验证实例详解
Nov 26 Javascript
javascript表单正则应用
Feb 04 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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 URL参数获取方式的四种例子
2014/02/28 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python lambda和Python def区别分析
2014/11/30 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
浅谈Python 函数式编程
2020/06/20 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
理工科学生的自我评价
2013/12/15 职场文书
项目申请汇报材料
2014/08/16 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android