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 ...
随机推荐
- Leetcode: plus one
June 22, 2015 Given a number represented as an array of digits, plus one to the number. Leetcode: pl ...
- Azure HDInsight 和 Spark 大数据实战(二)
HDInsight cluster on Linux 登录 Azure portal (https://manage.windowsazure.com ) 点击左下角的 NEW 按钮,然后点击 DAT ...
- 发一份shiro标准配置,特此记录
主要还是整合了本地ehcache,集群session管理过段时间放出 <?xml version="1.0" encoding="UTF-8"?> ...
- ASP.NET CORE dotnet run 命令使用debug方式运行
由于我的开发环境比较复杂,每次调试一套项目都要启动好几个VS,比较繁琐,今天决定换一种方式调试,对于不该改动的代码的附加项目直接使用dotnet run命令以debug的运行方式运行, 一开始无法运行 ...
- SQL Server日志文件(LDF文件)
一.日志文件过大处理方法: 1.设置数据库模式为简单模式:ALTER DATABASE 数据库名 SET RECOVERY SIMPLE 或者选中数据库-属性-选项-恢复模式设置为简单. 2.收缩日志 ...
- protobuf简介
#1,简介 把某种数据结构的信息,以某种格式保存起来: 主要用于数据存储,传输协议格式. #2,优点 性能好 反观XML的缺点:解析的开销惊人,不适用于事件性能敏感的场合:为了有较好的可读性,引入一些 ...
- CSS让图片垂直居中的几种技巧
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- js实现点击修改按钮之后单元格变成可编辑状态
主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...
- 自己动手写插件底层篇—基于jquery移动插件实现
序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...
- LeetCode-9-Palindrome Number
Determine whether an integer is a palindrome. Do this without extra space. 判断一个整数是否是回文数. 思路:求出数字abcd ...