JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载


Posted in Javascript onJune 28, 2012

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装。

这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码。

图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显):

JS主要代码如下:

(function() { 
var yQuery = (function() { 
var yQuery = function() { 
return yQuery.fn.init(); 
}; 
yQuery.fn = yQuery.prototype = { 
init: function() { 
return this; 
}, 
//图片等比缩放以及预加载方法申明 但是感觉这样写(return new imgResizeBox(e))很别扭 请高手赐教 
imgResize: function(e) { 
return new imgResizeBox(e); 
} 
}; 
//image图片处理 
var imgResizeBox = function(e) { 
//image参数 
setting = { 
imgId: "", //图片的容器的ID 比如.viewArea img 
height: 0, 
width: 0, 
loading: "images/lightbox-ico-loading.gif" 
}; 
$.extend(setting, e, setting); //参数替换 
var images = $(setting.imgId); //获取所有图片 
$(images).hide(); //隐藏 
var loading = new Image(); //预加载图片 
loading.className = "loading"; 
loading.src = setting.loading; 
$(images).after(loading); 
//预加载函数 
var perLoading = function($this) { 
var img = new Image(); 
img.src = $this.src; 
if (img.complete) { 
computeImg.call($this); 
return; 
}; 
img.onload = function() { 
computeImg.call($this); 
img.onload = function() { }; 
}; }; 
//图片缩放处理,以及图片显示函数 
var computeImg = function() { 
var m = this.height - setting.height; 
var n = this.width - setting.width; 
if (m > n) 
this.height = this.height > setting.height ? setting.height : this.height; 
else 
this.width = this.width > setting.width ? setting.width : this.width; 
$(this).next(".loading").remove(); 
$(this).show(); 
}; 
//循环调用预加载函数 
return $(images).each(function() { 
perLoading(this); 
}); 
} 
return yQuery; 
})(); 
window.yQuery = window.$$ = yQuery(); 
})();

调用代码如下:
$(document).ready(function() 
{ 
$$.imgResize({ imgId: ".viewArea img", height:160, width:270, loading: "https://3water.com/images/2012/155618/2012062710243954.gif" }); 
});

最后附上简单的源码: jsDemo_3water.rar
Javascript 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
Fixie.js 自动填充内容的插件
Jun 28 #Javascript
Javascript的各种节点操作实例演示代码
Jun 27 #Javascript
妙用Jquery的val()方法
Jun 27 #Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
You might like
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
基于python检查矩阵计算结果
2020/05/21 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
详解python的变量缓存机制
2021/01/24 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
关键字final的用法
2013/10/02 面试题
Internal修饰符有什么含义
2013/07/10 面试题
中学门卫岗位职责
2013/12/26 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
个人作风建设心得体会
2014/10/22 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
转变工作作风心得体会
2016/01/23 职场文书
数学复习课教学反思
2016/02/18 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏