鼠标放在图片上显示大图的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实现shift/ctrl/alt按键的获取
Apr 08 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
angularjs http与后台交互的实现示例
Dec 21 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
用PHP编写PDF文档生成器
2006/10/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Python写入CSV文件的方法
2015/07/08 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python列表(List)知识点总结
2019/02/18 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
四风问题自查报告剖析材料
2014/02/08 职场文书
元宵晚会主持词
2014/03/25 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
导游词之无锡梅园
2019/11/28 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers