缩放图片到合适大小
        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. php 获得汇率(解析页面内容获得指定数据)

    首先贴出原文链接:https://jingyan.baidu.com/article/922554465bf115851748f45f.html 方法如下: function getRate($fro ...

  2. java.io.EOFException ValueOperations.increment()操作后,获取值时有的bug

    ---恢复内容开始--- 今天使用spring-data-redis包操作redis,就是简单的使用redis的计数功能,在redis中的操作命令如:incr key;get key; 这两步操作使用 ...

  3. java 程序编译和运行过程

    java整个编译以及运行的过程相当繁琐,我就举一个简单的例子说明: Java程序从源文件创建到程序运行要经过两大步骤: 1.源文件由编译器编译成字节码(ByteCode): 2.字节码由java虚拟机 ...

  4. FlexRay笔记

    1.FlexRay具有高速.可靠及安全的特点.FlexRay在物理上通过两条分开的总线通信,每一条的数据速率是10MBit/s.CAN网络最高性能极限为1Mbps,而FlexRay总数据速率可达到20 ...

  5. PythonStudy——汇编语言 Assembly Language

    汇编语言 汇编语言(assembly language)是一种用于电子计算机.微处理器.微控制器或其他可编程器件的低级语言,亦称为符号语言.在汇编语言中,用助记符(Mnemonics)代替机器指令的操 ...

  6. Linux系统安装管理

    将lfs linux liveCD的内容copy安装到硬盘 先将98.ima(dos启动软盘镜像文件)用ultraISO写入到u盘(usbhdd+), 不必勾选“创建启动分区”. 将liveCD和内核 ...

  7. saltstack基础知识

    saltstack简介 saltstack基于python开发的C/S架构的配置管理工具,分为服务器端salt-master和客户端salt-minion.并且支持浩称最快的ZeroMQ消息队列机制, ...

  8. spark submit参数调优

    在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...

  9. 淘宝客知道这几个ID,收入将会提高50%

    基础问题天天说,天天有人问.这篇文章写点基础的.特别对新手的帮助会很大哦. 1,PID,做淘宝客不知道PID,赚到钱也会被冻结. 如何手动获取PID 2,单品ID,淘宝商品的唯一识别编号,和身份证一样 ...

  10. 用UpdateResource修改EXE文件图标(已修正)

    //请自行添加到 Type 处PICONDIRENTRY = ^ICONDIRENTRY;ICONDIRENTRY = packed record bWidth: Byte; bHeight: Byt ...