鼠标放在图片上显示大图的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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
详解Node.js开发中的express-session
May 19 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Element Dialog对话框的使用示例
Jul 26 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python文件和目录操作函数小结
2014/07/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
jupyter实现重新加载模块
2020/04/16 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python实现一个优先级队列的方法
2020/07/31 Python
销售类个人求职信范文
2013/09/25 职场文书
优秀中专生推荐信
2013/11/17 职场文书
物业管理计划书
2014/01/10 职场文书
社区端午节活动方案
2014/01/28 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python