鼠标放在图片上显示大图的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 相关文章推荐
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
在JavaScript中使用timer示例
May 08 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JavaScript类的写法
Sep 17 Javascript
web打印小结
Jan 11 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Vue props用法详解(小结)
Jul 03 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python 实时遍历日志文件
2016/04/12 Python
Python unittest模块用法实例分析
2018/05/25 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python 动态绘制爱心的示例
2020/09/27 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
人力资源专业推荐信
2013/11/29 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
党员创先争优承诺书
2014/03/26 职场文书
法院信息化建设方案
2014/05/21 职场文书
《雷雨》教学反思
2016/02/20 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL