zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    转物理老师的说说,过好自己的生活,别人的梦幻生活背后也有你看不见的无奈
    第一、二、三、BC范式的学习总结
    一位毕业四年的前辈的经历
    普里姆算法,克鲁斯卡尔算法,迪杰斯特拉算法,弗洛里德算法
    从零开始构建JavaScript框架4——DOM遍历2
    从零开始构建JavaScript框架3——DOM遍历1
    从零开始构建JavaScript框架2——总体结构以及元素的获取和创建
    从零开始构建JavaScript框架1——为何JavaScript开发需要框架
    从浏览器输入URL到页面加载完成到底发生了什么?
    第5课 C语言指针深入1
  • 原文地址:https://www.cnblogs.com/luluping/p/1459861.html
Copyright © 2011-2022 走看看