鼠标放在图片上显示大图的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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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
PHP5常用函数列表(分享)
2013/06/07 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
.net工程师笔试题
2012/06/09 面试题
Overload和Override的区别
2012/09/02 面试题
园长自我鉴定
2013/10/06 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
升学宴演讲稿
2014/09/01 职场文书
同事欢送会致辞
2015/07/31 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
oracle数据库去除重复数据
2022/05/20 Oracle
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS