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');
})
JS自动缩放页面图片的更多相关文章
- pageresponse.min.js自动缩放页面改写
/* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...
- js自动刷新页面代码
<script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...
- javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- js 实现的页面图片放大器以及 event中的诸多 x
背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...
- JS自动刷新页面一次
<script type="text/javascript"> //刷新页面 if(location.href.indexOf("refresh=1" ...
- 利用JS自动打开页面上链接的实现代码
在这里做一下简单记录,防止自己忘记. 下面是实现自动点击打开链接的主要函数,功能不再细说,防止太多人滥用,有心的人一看就会明白,改把改把就是一个邪恶的程序: function randopen() { ...
- webpack vue app.js自动注入页面.为app.js增加随机参数
node_modules/html-webpack-plugin/index.js 搜索 postProcessHtml 修改代码增加如下: if (assetTags && asse ...
- 利用zepto.js实现移动页面图片全屏滑动
HTML <%-- Created by IntelliJ IDEA. User: fanso2o Date: 2017/2/28 Time: 16:09 To change this temp ...
随机推荐
- Spring AOP深入剖析
一.通过代理工厂模式配置通知 ①.前置通知.后置通知: 定义某接口:ISomeService,并自定义方法 public interface ISomeService { public void tr ...
- python SQLAlchemy
这里我们记录几个python SQLAlchemy的使用例子: 如何对一个字段进行自增操作 user = session.query(User).with_lockmode('update').get ...
- NOI2018准备Day14晚
1个小时调处了前天晚上卡了一个晚上的数独,果然还是dfs回溯的问题. 1个小时做codevs2500城堡,然而并没有做出来 剩下1个小时,做了一道字符串的STL,空格和换行符 ,真心累啊...... ...
- 图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...
- LeetCode:N-Queens I II(n皇后问题)
N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...
- sql case 用法总结
快下班了,抽点时间总结一下sql 的 case 用法. sql 里的case的作用: 用于计算条件列表的表达式,并返回可能的结果之一.sql 的case 类型于编程语言里的 if-esle if-el ...
- Curl扩展开启失败解决方案
1.php.ini 开启curl扩展 2.设置有时候开启之后,curl还是不能将php目录下的libssh2.dll复制到apache/bin下.(基本上可以成功) 3. 如果没有开启成功,将php安 ...
- String、StringBuilder 与 StringBuffer
1. 在执行速度方面的比较:StringBuilder > StringBuffer 2. StringBuffer与StringBuilder,他们是字符串变量,是可改变的对象,每当我们用它们 ...
- MYSQL(一)
一,概述: 1,什么是数据库: 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库. 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL Serv ...
- cxf设置代理访问webservice接口
由于业务上的需要,需要访问第三方提供的webservice接口,但由于公司做了对外访问的限制,不设置代理是不能外网的,如果使用http设置代理访问外网还是比较容易的,但使用cxf有点不知道从哪里入手. ...