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 ...
随机推荐
- winform/窗体鼠标事件编程中的几个问题
1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...
- 【JavaScript 插件】实现图片倒影效果 - reflex.js
目前版本: reflex.js 1.5 适用的主流浏览器: Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+ 原理:通过 canvas 重画图片,显示倒影 ...
- 双11遇上ZBrushCore,如此优惠还等什么!
对不起!让大家久等了,ZBrush简体中文版ZBrushCore这次是真的来了,恰逢双11,老板说了,钱不是问题,你们开心就好,特别是热爱3D的单身狗们!你们那么热爱这个行业,1099元/套终身授权使 ...
- jsp前3章试题分析
/bin:存放各种平台下用于启动和停止Tomcat的脚本文件 /logs:存放Tomcat的日志文件 /webapps:web应用的发布目录 /work:Tomcat把由JSP生成的Servlet存放 ...
- Java面试宝典摘抄
1,ClassLoader知识 加载流程:当运行一个程序时,JVM启动,运行bootstrap classloader,该classloader加载Java核心API(此时ExtClassLoader ...
- php $CI =& get_instance();
初学php 看有人这样写,$CI =& get_instance(); 要你自定义的类库中访问CodeIgniter的原始资源,你必须使用 get_instance() 函数.这个函数返回一个 ...
- mysql导入导出.csv格式数据
window下导入数据: LOAD DATA INFILE "C:\\1.csv" REPLACE INTO TABLE demo CHARACTER SET gb2312 FIE ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- Hibernate批量处理海量数据的方法
本文实例讲述了Hibernate批量处理海量数据的方法.分享给大家供大家参考,具体如下: Hibernate批量处理海量其实从性能上考虑,它是很不可取的,浪费了很大的内存.从它的机制上讲,Hibern ...
- Tornado 结合memcached缓存页面
原因 Blog是一个更新并不很频繁的一套系统,但是每次刷新页面都要更新数据库反而很浪费资源,添加静态页面生成是一个解决办法,同时缓存是一个更好的主意,可以结合Memcached添加少量的代码进行缓存, ...