鼠标放在图片上显示大图的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 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
如何构建 vue-ssr 项目的方法步骤
Aug 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中copy on write写时复制机制介绍
2014/05/13 PHP
smarty表格换行实例
2014/12/15 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python 图片验证码代码分享
2012/07/04 Python
python+mysql实现教务管理系统
2019/02/20 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
pytorch简介
2020/11/11 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
导师评语大全
2014/04/26 职场文书
操行评语大全
2014/04/30 职场文书
企业活动策划方案
2014/06/02 职场文书
安全目标管理责任书
2014/07/25 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
物流管理专业推荐信
2014/09/06 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
护士年终个人总结
2015/02/13 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python