用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


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

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

2017-07-07 作者： zhongsion举报

[javascript]代码库

view sourceprint?
$("#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 条评论 1/1页

发表评论：

评论须知：

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


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...