鼠标放在图片上显示大图的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 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
js日期相关函数总结分享
Oct 15 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
VuePress 中如何增加用户登录功能
Nov 29 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python实现手绘图效果实例分享
2020/07/22 Python
利用python汇总统计多张Excel
2020/09/22 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
Python文件操作的面试题
2013/06/22 面试题
2014年健康教育实施方案
2014/02/17 职场文书
公务员诚信承诺书
2014/05/26 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
优秀党员申报材料
2014/12/18 职场文书
信用卡工资证明范本
2015/06/19 职场文书
关于python中模块和重载的问题
2021/11/02 Python