• jQuery图片预加载+等比例缩放


    在前段时间做的图片预加载插件上,再次进行扩展。添加了图片的高度和宽度进行等比例缩放和居中。


    演示:
    http://www.cssrain.cn/demo/imgResizeCenter/demo.html

    相关代码:
    /*
    * jQuery插件:
    * 图片预加载
    * 重置图片宽度,高度
    * 图片水平,垂直居中
    * Dev By CssRain.cn
    */
    jQuery.fn.loadthumb = function(options) {
        options = $.extend({
             src : "",
             imgId : "myImgs",
             parentId : "CRviewer"
        },options);
        var _self = this;
        _self.hide();
        var img = new Image();
        $(img).load(function(){
            imgDem = {};
            imgDem.w  = img.width;
            imgDem.h  = img.height;
            imgDem = $.imgResize({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
            var imgMargins = $.imgCenter({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
            $("#"+options.imgId).css({imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t});
            _self.attr("src", options.src);
            _self.fadeIn("slow");
        }).attr("src", options.src);  //.atte("src",options.src)要放在load后面,
        return _self;
    }
    //重置图片宽度,高度插件 ( parentDem是父元素,imgDem是图片 )
    jQuery.imgResize = function(parentDem,imgDem){
        if(imgDem.w>0 && imgDem.h>0){
            var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
            //如果 指定高度/图片高度  小于  指定宽度/图片宽度 ,  那么,我们的比例数 取 指定高度/图片高度。
            //如果 指定高度/图片高度  大于  指定宽度/图片宽度 ,  那么,我们的比例数 取 指定宽度/图片宽度。
            if(rate <= 1){  
                imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
                imgDem.h = imgDem.h*rate;
            }else{//  如果比例数大于1,则新的宽度等于以前的宽度。
                imgDem.w = imgDem.w;
                imgDem.h = imgDem.h;
            }
        }
        return imgDem;
    }
    //使图片在父元素内水平,垂直居中,( parentDem是父元素,imgDem是图片 )
    jQuery.imgCenter = function(parentDem,imgDem){
        var left = (parentDem.w - imgDem.w)*0.5;
        var top = (parentDem.h - imgDem.h)*0.5;
        return { "l": left , "t": top};
    }

    下载:
    http://www.cssrain.cn/demo/imgResizeCenter/imgResize.rar


    本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1342

  • 相关阅读:
    oracle数据库sql比较日期
    JAVA中替换字符的方法replace和replaceAll 区别
    得到某个字段为空的所有记录
    使用jQuery操作元素属性
    JS控制元素可见(显示)与不可见(隐藏)
    当JS出现的Cannot read property 'XXX' of null错误
    判断两个对象不相等
    js将字符串转换为数字等类型
    EL表达式各种函数使用大全
    ajax返回值传给js全局变量
  • 原文地址:https://www.cnblogs.com/luluping/p/1459861.html
Copyright © 2020-2023  润新知