用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

图片ajax动态加载,并且让图片等比缩放(设定最大宽高),自适应并居中

2017-07-07 作者:zhongsion举报

[javascript]代码库

$("#pic_list ").on("click","img", function() {

        var big_img_src = this.src.replace("small/","");
        load_big_pic(big_img_src);

    });

    //图片等比自适应并居中
    function load_big_pic(big_img_src) {

        $('#big_img').attr('src',big_img_src);
        var img = new Image();
        img.src = big_img_src;

        img.onload = function(){
            var imgWidth ;
            var imgHeight ;

            imgWidth = this.width;
            imgHeight = this.height;

            if(imgWidth<1200 && imgHeight<400)
            {
                $("#big_img").width(imgWidth);
                $("#big_img").height(imgHeight);
            }
            else
            {
                newWidth = 400*imgWidth/imgHeight;
                $("#big_img").width(newWidth);
                $("#big_img").height(400);
                //让图片居中显示
                var margin = (1200 - newWidth) / 2;
                $("#big_img").css("margin-left", margin);
            }
        };

    }


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。