zoukankan      html  css  js  c++  java
  • Jquery让图片根据浏览器窗口大小自动缩放

    (function($){
        $.fn.resizeimage = function(){
            var imgLoad = function (url, callback) {
                var img = new Image();
                img.src = url;
                if (img.complete) {
                    callback(img.width, img.height);
                } else {
                    img.onload = function () {
                        callback(img.width, img.height);
                        img.onload = null;
                    };
                };
            };
            var original = {
                $(window).width()
            };
            return this.each(function(i,dom){
                var image = $(this);
                imgLoad(image.attr('src'),function(){
                    var img = {
                        image.width(),
                        height:image.height()
                    },percentage=1;
                    if(img.width<original.width){
                        percentage = 1;
                    }else{
                        percentage = (original.width)/img.width;
                    }
                    image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage);
                    $(window).resize(function(){
                        var w = $(this).width();
                        percentage = w/img.width>1?1:w/img.width;
                        var newWidth = img.width*percentage-30;
                        var newHeight = img.height*percentage;
                        image.width(newWidth).height(newHeight);
                    });
                });
            });
        };
    })(jQuery);

    使用方法:

    $('img').resizeimage();

  • 相关阅读:
    奈良有鹿
    Luogu P1892 团伙
    Luogu P1330 封锁阳光大学
    java读取property文件
    collection
    testNG学习
    maven项目学习
    Android.mk详解二
    sdk开发经验
    工作经验
  • 原文地址:https://www.cnblogs.com/niaowo/p/4316785.html
Copyright © 2011-2022 走看看