zoukankan      html  css  js  c++  java
  • js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小
            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);
                });
      

  • 相关阅读:
    ISAG协议中彩信支持的几种附件格式(河南电信)
    河南电信ISAG短信下行数据格式
    SQL中varchar和nvarchar有什么区别?
    通过一个很实用的例子让你学会TSQL编程的基本语法和思想
    在读取或者保存word时,程序捕获到word异常“word无法启动转换器mswrd632 wpc”
    工作基本搞定等待周五入职
    ClickOnce发布时,资源文件添加问题
    访问IIS元数据库失败
    一个随机产生中文简体字的一个类
    QQ抢车位外挂(续)
  • 原文地址:https://www.cnblogs.com/4job/p/9962686.html
Copyright © 2011-2022 走看看