js限制图片大小、点击放大图片、点击在新开页面显示

最新推荐文章于 2022-11-15 16:37:24 发布

weixin_33743880

最新推荐文章于 2022-11-15 16:37:24 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/4job/p/9962686.html

本文介绍了一种JavaScript方法，用于自动调整网页中图片的大小，确保它们不会超过指定的最大宽度和高度。此外，还提供了图片点击放大和恢复原大小的功能，以及在新窗口中打开原始图片的方法。

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

转载于:https://www.cnblogs.com/4job/p/9962686.html