/**
* 缩略图
*
* @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');
})

JS自动缩放页面图片的更多相关文章

  1. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  2. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  3. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  4. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  5. js 实现的页面图片放大器以及 event中的诸多 x

    背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...

  6. JS自动刷新页面一次

    <script type="text/javascript"> //刷新页面 if(location.href.indexOf("refresh=1" ...

  7. 利用JS自动打开页面上链接的实现代码

    在这里做一下简单记录,防止自己忘记. 下面是实现自动点击打开链接的主要函数,功能不再细说,防止太多人滥用,有心的人一看就会明白,改把改把就是一个邪恶的程序: function randopen() { ...

  8. webpack vue app.js自动注入页面.为app.js增加随机参数

    node_modules/html-webpack-plugin/index.js 搜索 postProcessHtml 修改代码增加如下: if (assetTags && asse ...

  9. 利用zepto.js实现移动页面图片全屏滑动

    HTML <%-- Created by IntelliJ IDEA. User: fanso2o Date: 2017/2/28 Time: 16:09 To change this temp ...

随机推荐

  1. Asp.Net Core 简单的使用加密的Cookie保存用户状态

    在以前的Asp.Net中可以用 FormsAuthentication 类的一系列方法来使用加密的Cookie存储用户身份,使用简单,可控性强.在Asp.Net Core中是否也可以的?答案是当然的. ...

  2. BZOJ 3524: [Poi2014]Couriers [主席树]

    3524: [Poi2014]Couriers Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1892  Solved: 683[Submit][St ...

  3. 移位操作(>>、<<)

    public static void main(String[] args) { /** 移位就是二进制的数往左或右移动,因为接近计算机底层,所以速度比较快 * 8 4 2 1 * * 7 化为二进制 ...

  4. Rect 和 Bounds

    Rect 表示一个2D矩形区域 Bounds 表示一个3D的方块区域 http://www.cnblogs.com/crazylights/p/3977348.html

  5. java数组初始化函数

    用法1:接受2个参数Arrays.fill( a1, value );注:a1是一个数组变量,value是一个a1中元素数据类型的值,作用:填充a1数组中的每个元素都是value例如:boolean[ ...

  6. php导出EXCEL方法

    // 将数据表导出成 csv 格式文件并下载 // @param string $data:要导出的数据 // @param array $del:不导出的字段名,指定的字段数据不被导出 // @pa ...

  7. php结合redis实现高并发下的抢购、秒杀功能

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖"问题)对于第一个问题,已经很容易想到用缓存 ...

  8. windows7配置Nginx+php+mysql教程

    windows7配置Nginx+php+mysql教程 最近在学习php,想把自己的学习经历记录下来,并写一些经验,仅供参考交流.此文适合那些刚刚接触php,想要学习并想要自己搭建Nginx+php+ ...

  9. 微信小程序之页面路由(九)

    [未经允许,请勿以任何形式转载] 什么是路由? 我们通常理解的路由指分组数据包从源到目的地时,决定端到端路径的网络范围的进程: 借用上面的定义,我们可以理解小程序页面路由,根据路由规则(路径)从一个页 ...

  10. EF6 在 SQLite中使用备忘

    == 菜鸟级选手试验在EF6中使用Sqlite,零EF基础,少量Sqlite基础.经过断断续续的很长时间 - _ -! >>连接 1. 安装 使用目前最新版本EF6.1,Sqlite1.0 ...