zoukankan      html  css  js  c++  java
  • JS自动缩放页面图片

    /**
     * 缩略图
     *
     * @param bool isScaling 是否缩放
     * @param int width 宽度
     * @param int height 高度
     * @param string loadindPic 表示“正在加载中”的图片地址
     */
    jQuery.fn.LoadImage = function (isScaling, width, height, loadindPic) {
    	if (loadindPic == null) {
    		loadindPic = "../images/msg_img/loading.gif";
    	}
    
    	return this.each(function () {
    		var _this = $(this);
    		var src = $(this).attr("src")
    			var img = new Image();
    		img.src = src;
    
    		// 自动缩放图片
    		var autoScaling = function () {
    			if (isScaling) {
    				if (img.width > 0 && img.height > 0) {
    					if (img.width / img.height >= width / height) {
    						if (img.width > width) {
    							_this.width(width);
    							_this.height((img.height * width) / img.width);
    						} else {
    							_this.width(img.width);
    							_this.height(img.height);
    						}
    					} else {
    						if (img.height > height) {
    							_this.height(height);
    							_this.width((img.width * height) / img.height);
    						} else {
    							_this.width(img.width);
    							_this.height(img.height);
    						}
    					}
    				}
    			}
    		}
    
    		// 处理ff下会自动读取缓存图片
    		if (img.complete) {
    			autoScaling();
    			return;
    		}
    		$(this).attr("src", "");
    		var loading = $("<img alt="加载中..." title="图片加载中..." src="" + loadindPic + "" />");
    
    		_this.hide();
    		_this.after(loading);
    		$(img).load(function () {
    			autoScaling();
    			loading.remove();
    			_this.attr("src", this.src);
    			_this.show();
    			//$('.photo_prev a,.photo_next a').height($('#big-pic img').height());
    		});
    	});
    }
    
    
    // 应用举例
    $(function () {
    	$('#Article .content img').LoadImage(true, 660, 660, 'http://127.0.0.12:8088/statics/images/s_nopic.gif');
    })
    
  • 相关阅读:
    消息中间件
    线程以及多线程
    锁以及分布式锁
    并发以及高并发
    SpringBoot + SpringCloud学习踩坑实记
    公众号笔记: 2018年12月
    浅谈final关键字的用法
    浅谈static关键字的四种用法
    Linux常用的一些命令
    HTTPS
  • 原文地址:https://www.cnblogs.com/52php/p/5677877.html
Copyright © 2011-2022 走看看