JavaScript 学习笔记之生龙活虎jQuery写法图片等比缩放甚至预加载_jquery_脚本之家

188金宝搏,JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装。
这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码。
图片等比缩放以及预加载的效果如下: JS主要代码如下: 复制代码 代码如下: { var yQuery = { var yQuery
= function() { return yQuery.fn.init(); }; yQuery.fn = yQuery.prototype
= { init: function() { return this; }, //图片等比缩放以及预加载方法申明
但是感觉这样写(return new imgResizeBox很别扭 请高手赐教 imgResize:
function { return new imgResizeBox; } }; //image图片处理 var
imgResizeBox = function { //image参数 setting = { imgId: "",
//图片的容器的ID 比如.viewArea img height: 0, width: 0, loading:
"images/lightbox-ico-loading.gif" }; $.extend; //参数替换 var images =
$; //获取所有图片 $; //隐藏 var loading = new Image(); //预加载图片
loading.className = "loading"; loading.src = setting.loading; $.after;
//预加载函数 var perLoading = function { var img = new Image(); img.src
= $this.src; if { computeImg.call; return; }; img.onload = function() {
computeImg.call; img.onload = function() { }; }; };
//图片缩放处理,以及图片显示函数 var computeImg = function() { var m =
this.height - setting.height; var n = this.width - setting.width; if
this.height = this.height > setting.height ? setting.height :
this.height; else this.width = this.width > setting.width ?
setting.width : this.width; $.next; $; }; //循环调用预加载函数 return
$.each { perLoading; } return yQuery; })(); window.yQuery = window.$$ =
yQuery; 调用代码如下: 复制代码 代码如下:
$.ready { $$.imgResize({ imgId: ".viewArea img", height:160, width:270,
loading: "//www.jb51.net/images/2012/155618/2012062710243954.gif" });
}); 最后附上简单的源码: jsDemo_jb51.rar

相关文章

Comment ()
评论是一种美德,说点什么吧,否则我会恨你的。。。