鼠标放在图片上显示大图的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实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
vue 通过base64实现图片下载功能
Dec 19 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JS中递归函数
2016/06/17 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
从vue源码看props的用法
2019/01/09 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Django 再谈一谈json序列化
2020/03/16 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
打架赔偿协议书范本
2014/10/26 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
个人工作决心书
2015/09/22 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
git中cherry-pick命令的使用教程
2022/06/25 Servers
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript