前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >点击图片放大至原始图片大小

点击图片放大至原始图片大小

作者头像
蓓蕾心晴
发布2018-04-12 13:25:38
5.2K0
发布2018-04-12 13:25:38
举报
文章被收录于专栏:前端小叙

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了:

代码语言:javascript
复制
var _w = parseInt($(window).width());//获取浏览器的宽度
    $("#abc img").each(function(i){
        var img = this;
        var realWidth;//真实的宽度
        var realHeight;//真实的高度
        $("<img/>").attr("src", $(img).attr("src")).load(function() {
            realWidth = this.width;
            realHeight = this.height;

        })
        var flag = 1;
        $(img).on("click",function () {
            if (flag == 1) {
                if(realWidth>=_w){
                    $(img).css({
                        "width": "100%",
                        "height": "auto",
                        "position": "fixed",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": "-30%",
                        "margin-left": "-50%"
                    });
                }else{
                    $(img).css({
                        "width": realWidth,
                        "height": realHeight,
                        "position": "fixed",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": -realHeight / 2,
                        "margin-left": -realWidth / 2
                    });
                }
                flag = 0;
            } else {
                $(img).css({
                    "width": 500,
                    "height": 400,
                });
                flag = 1;
            }
        });
    });

以上代码获取图片原始宽高为转载,进行加工后如上。亲测有效,但是对于图片上传后,点击方法后,貌似并不能获取到原始宽高,我想应该是load的原因,还请懂的大神多多指点,如何实现上传的图片文件,点击缩略图,放大至原始大小!!!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-12-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档