缩放图片到合适大小
        function ResizeImages() {
            var myimg, oldwidth, oldheight;
            var maxwidth = 400;
            var maxheight = 400
            var imgs = document.getElementsByTagName('img');  //获取页面图片  这里使用document过去

for (i = 0; i < imgs.length; i++) {
                myimg = imgs[i];

if (myimg.width > myimg.height) {
                    if (myimg.width > maxwidth) {
                        oldwidth = myimg.width;
                        myimg.height = myimg.height * (maxwidth / oldwidth);
                        myimg.width = maxwidth;
                    }
                } else {
                    if (myimg.height > maxheight) {
                        oldheight = myimg.height;
                        myimg.width = myimg.width * (maxheight / oldheight);
                        myimg.height = maxheight;
                    }
                }
            }
        }
点击放大、再点击恢复

点击放大两倍 再点击恢复正常大小
            var flag = true;//状态true为正常的状态,false为放大的状态
            $("#img").click(function () {
                var imgH,//图片的高度
                    imgW,//图片的宽度
                    img = document.getElementsByTagName('img')[0];//图片元素
                //图片点击事件
                imgH = img.height; //获取图片的高度
                imgW = img.width; //获取图片的宽度
                if (flag) {
                    //图片为正常状态,设置图片宽高为现在宽高的2倍
                    flag = false;//把状态设为放大状态
                    img.height = imgH * 2;
                    img.width = imgW * 2;
                } else {
                    //图片为放大状态,设置图片宽高为现在宽高的二分之一
                    flag = true;//把状态设为正常状态
                    img.height = imgH / 2;
                    img.width = imgW / 2;
                }
            });

点击在新页面打开浏览原图

//在新页面打开浏览
            $("#img").click(function () {
                var src = $("#img").attr("src");
                window.open(src);
            });

js限制图片大小、点击放大图片、点击在新开页面显示的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. 实现图片大小的自动控制( 图片大小控制CSS代码)

    图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...

  3. jquery点击放大图片

    参考地址:https://blog.csdn.net/qq_42249896/article/details/86569636 一.应用场景:点击图片可以对图片进行放大显示. 二.实现代码: 说明:我 ...

  4. ios 点击放大图片,保存至手机相册

    直接贴.m文件代码 #import "UIImageView+Scale.h" static CGRect oldframe; @implementation UIImageVie ...

  5. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  6. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  7. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  8. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

  9. iOS 使用系统的UITabBarController 修改展示的图片大小

    1. 设置TabBarItem图片的大小 1 - (void)configurationAppTabBarAndNavigationBar { // 选中的item普通状态图片的大小 UIImage ...

随机推荐

  1. Java基础之枚举类型

    枚举 为什么需要枚举 在Java开发过程中,有时需要定义一系列有限的数据,如:月份.星期等.<br> java1.5之前,主要通过定义一系列静态常量完成. class Genders{ p ...

  2. 使用fpm 方便快速生成postgresql extension分发包

    fpm 是一个不错,而且强大的rpm.deb,系统启动服务工具包,我们可以用来快速的生成专业的软件分发包 演示一个pg 扩展包分发包的生成(rpm 以及deb) 安装fpm sudo gem inst ...

  3. php 会话控制(关于session的维护与生命周期)

    Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器创建生成一个唯一的sessionID,用该sessionID为标识符来存取服务器端的Session存储空间,在会 ...

  4. because there was insufficient free space available after evicting expired cache entries

    Tomcat运行的时候哗哗哗的报警告 版本是Tomcat 8.5.15 告警信息关键字如下 because there was insufficient free space available af ...

  5. PS 给照片换背景

    1. 打开一张照片,导入证件照 2. 点击选择 => 选择并遮住 (快捷键 command + option + r) 3. 点击快速选择工具,将属性设置里面的视图模式选择为洋葱皮,鼠标点击需要 ...

  6. 服务跟踪sleuth和可视化跟踪工具Zipkin

    一.增加配置 在Order工程中添加配置 <dependency> <groupId>org.springframework.cloud</groupId> < ...

  7. android 监控应用进程

    在android系统中,怎么监控应用的进程改变及消亡呢? 至于监控应用进程能做什么,这个就不多说了,你懂的. 在android系统中有这么一个类ActivityManagerNative,看名称就大概 ...

  8. Java Web参考资料

    Maven Maven学习 Eclipse 使用Maven 构建Web项目的最佳方式:总的来说就是先要修改项目的Project facets来更改Java版本.Servlet版本. 错误Cannot ...

  9. linux 6.5上创建新用户后,不能登陆?

    linux 6.5上创建新用户后,不能登陆? 使用root账户登陆却可以! [root@ log]# useradd mtdk[root@ log]# echo 123abc |passwd --st ...

  10. centos 7 安装sql 审核工具 inception + archer

    系统环境: Centos7 + python2.7 + python3 .... 下载 源码地址:https://github.com/mysql-inception/inception Incept ...