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

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

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的原因,还请懂的大神多多指点,如何实现上传的图片文件,点击缩略图,放大至原始大小!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(2)---理解单元格类型

理解单元格类型基本信息 Spread支持几十种单元格类型,如复选框单元格、日期时间单元格、或者一个简单的文本单元格。单元格类型可以对单独的单元格、列、行、一个单...

20280
来自专栏影子

jQuery中的常用内容总结(二)

371110
来自专栏前端说吧

Css中Position定位属性与层级关系

32650
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

26460
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

23270
来自专栏软件开发

HTML5 学习总结(二)——HTML5新增属性与表单元素

一、HTML5新增属性 1.1、contextmenu contextmenu的作用是指定右键菜单。 <!DOCTYPE html> <html> <h...

31070
来自专栏老马寒门IT

03-Vue入门系列之Vue列表渲染及条件渲染实战

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显...

27480
来自专栏Java后端技术

jquery中dom元素的attr和prop方法的理解

  在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和pro...

9420
来自专栏影子

jQuery中的常用内容总结(二)

14440
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

25620

扫码关注云+社区

领取腾讯云代金券