自己写的一个类似jQuery框架，还写了7个Js插件，共享给大家.
我给我的框架取了个名字jRoot.
框架调用的方式采用new jRoot('elementId')或者new $('elementId').为了方便调用可以省略new。
$ = jRoot = function(selector){
if(window == this) {return new jRoot(selector);} //当调用方式为jRoot('elementId')时，this = window,就会创建一个jRoot对象.
this.initialize(selector);
};
jRoot有jRoot.prototype(jRoot主要的方法)，jRoot.doc(文档加载类,主要用于判断页面是否加载完毕), jRoot.event(事件添加删除方法), jRoot.browser(浏览器判断方法), jRoot.iUtility(取元素高宽等常见方法), jRoot.tween(主要实现缓动效果的算法)六个部分。以后还会陆续添加jRoot.ajax等部分。
jRoot.js代码如下:
Code
$ = jRoot = function(selector){
if(window == this) {return new jRoot(selector);}
this.initialize(selector);
};
//jRoot基本函数
jRoot.fn = jRoot.prototype = {
initialize: function(selector){
if(typeof selector == 'string'){
var elem = document.getElementById(selector);
if(elem){
this.length = 1;
this[0] = elem;
}
}else{
this.length = 1;
this[0] = selector;
};
return this;
},
init: function(){
},
get: function(){
return this[0];
},
cleanWhitespace: function(){
},
insertBefore: function(){
},
appendChild: function(){
},
clone: function(){
},
html: function(){
},
bind: function(object, fun){
//arguments中第一个参数为object, 第二个参数fun, 其后的参数为fun的参数
if(arguments.length < 2) return;
var args = [];
for (var i = 2; i < arguments.length; i++){
args.push(arguments[i]);
}
return function() {
//注意：apply函数的第二个参数是一个参数数组. 即func.apply(func1,[var1,var2,var3])
return fun.apply(object, args);
}
},
bindAsEventListener: function(object, fun) {
return function(e) {
//call的参数调用方法：func.call(func1,var1,var2,var3)
return fun.call(object, (e || window.event));
}
},
css: function(name){
var result;
elem = this[0];
name = name.toLowerCase();
if(elem.style && elem.style[name]){
result = elem.style[name];
}
else if(document.defaultView && document.defaultView.getComputedStyle){ // firefox,opera,safari
computedStyle = document.defaultView.getComputedStyle(elem, null);
result = computedStyle.getPropertyValue(name);
}
else if(elem.currentStyle){ // ie
name = name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){return a.toUpperCase()+b.toLowerCase();}); //转化为驼峰写法
result = elem.currentStyle[name];
}
return result;
}
};
//扩展
//先编写自己的插件 jRoot.plugin = {youPlugIn: function(options){};}
//再调用jRoot.fn.extend(jRoot.plugin);
//这样youPlugIn就加入进来了，这样就可以直接使用jRoot().youPlugIn();
jRoot.extend = jRoot.fn.extend = function(destination, source){
if(!source){
source = destination;
destination = this;
};
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
//jRoot文档加载类
jRoot.doc = {
isReady: false,
isReadyBound: false,
readyList: [],
ready:function(fn){
jRoot.doc.bindReadyListener();
if(jRoot.doc.isReady){
fn.apply(this);
}else{
jRoot.doc.readyList.push(fn);
}
},
bindReadyListener:function(){
if(jRoot.doc.isReadyBound){
return;
}
jRoot.doc.isReadyBound = true;
jRoot.event.add(window, 'load', jRoot.doc.fireReadyListener);
},
fireReadyListener:function(){
if(!jRoot.doc.isReady){
jRoot.doc.isReady = true;
if(jRoot.doc.readyList){
//var args = Array.prototype.slice.call(arguments, 0);
for(var i=0; i<jRoot.doc.readyList.length;i++){
jRoot.doc.readyList[i].apply(this);
}
jRoot.doc.readyList = null;
}
}
}
};
jRoot.ready = jRoot.fn.ready = jRoot.doc.ready;
//事件添加删除方法
jRoot.event = {
add:function(elem, eventName, func){
if(window.attachEvent){
elem.attachEvent('on' + eventName, func);
}else if(window.addEventListener){
elem.addEventListener(eventName, func, false);
}
},
remove:function(elem, eventName, func){
if(window.detachEvent){
elem.detachEvent('on' + eventName, func);
}else if(window.removeEventListener){
elem.removeEventListener(eventName, func, false);
}
}
};
//浏览器判断方法
var userAgent = navigator.userAgent.toLowerCase();
jRoot.browser = {
isIE: (document.all) ? true : false,
isIE6: document.all && ([/MSIE (\d)\.0/i.exec(userAgent)][0][1] == 6),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
//元素高宽等常见方法
jRoot.iUtility = {
getScroll : function (e)
{
var t, l, w, h, iw, ih;
if (e && e.nodeName.toLowerCase() != 'body') {
t = e.scrollTop;
l = e.scrollLeft;
w = e.scrollWidth;
h = e.scrollHeight;
iw = 0;
ih = 0;
} else {
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
}
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
},
getPositionLite : function(el)
{
var x = 0, y = 0;
while(el) {
x += el.offsetLeft || 0;
y += el.offsetTop || 0;
el = el.offsetParent;
}
return {x:x, y:y};
},
getSizeLite : function(el)
{
return {
wb:el.offsetWidth||0,
hb:el.offsetHeight||0
};
},
getClient : function(e)
{
var h, w, de;
if (e) {
w = e.clientWidth;
h = e.clientHeight;
} else {
de = document.documentElement;
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
}
return {w:w,h:h};
}
};
/*
算法来源：http://www.robertpenner.com/easing/
t：current time（当前时间）
b：beginning value（初始值）
c： change in value（变化量）
d：duration（持续时间）
返回：b+当前变化量。当当前时间=持续时间时，返回b+c
*/
jRoot.tween = {
/*无缓动效果*/
linear: function(t,b,c,d){ return c*t/d + b; },
/*二次方的缓动（t^2）*/
quad: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t + b;
},
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
},
/*三次方的缓动（t^3）*/
cubic: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
},
/*四次方的缓动（t^4）*/
quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
},
/*五次方的缓动（t^5）*/
quint: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
},
/*正弦曲线的缓动（sin(t)）*/
sine: {
easeIn: function(t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOut: function(t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOut: function(t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
},
/*指数曲线的缓动（2^t）*/
expo: {
easeIn: function(t,b,c,d){
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOut: function(t,b,c,d){
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOut: function(t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
/*圆形曲线的缓动（sqrt(1-t^2)）*/
circ: {
easeIn: function(t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOut: function(t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
},
/*指数衰减的正弦曲线缓动*/
elastic: {
easeIn: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
},
easeInOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
},
/*超过范围的三次方缓动（(s+1)*t^3 - s*t^2）*/
back: {
easeIn: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
},
/*指数衰减的反弹缓动*/
bounce: {
easeIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
}
下面写了个myPlugin插件,
jRoot.plugin = {
myPlugin:function(options){ //options可以传入一些参数
this.init = function(){
};
this.method = function(){
};
this.init();
return this;
};
}
在这个插件文件myPlugin.js最后部分写上jRoot.fn.extend(jRoot.plugin);或者jRoot.prototype.extend(jRoot.plugin);
其中extend方法：
jRoot.extend = jRoot.fn.extend = function(destination, source){
if(!source){
source = destination;
destination = this;
};
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
这样这个插件方法就扩展到jRoot.prototype方法下面了。
调用的时候就可以使用$('elementId').myPlugin({});
大概的框架就是这样的。下面是写的几个小插件:
jRoot.iDrag.js 拖拽效果控件
jRoot.iMaskLay.js 遮盖效果控件
jRoot.iDialogBox.js 对话框控件
jRoot.iRichEditor.js 富文本编辑器
jRoot.iSuggest.js 智能提示框
jRoot.iTabPanel.js 多页签控件
jRoot.iCoupletAd.js 对联控件
jRoot.iImageMenu.js 多图片滑动效果控件
jRoot.iMarquee.js 文字滚动效果控件
下载地址
框架调用的方式采用new jRoot('elementId')或者new $('elementId').为了方便调用可以省略new。
$ = jRoot = function(selector){
if(window == this) {return new jRoot(selector);} //当调用方式为jRoot('elementId')时，this = window,就会创建一个jRoot对象.
this.initialize(selector);
};
jRoot有jRoot.prototype(jRoot主要的方法)，jRoot.doc(文档加载类,主要用于判断页面是否加载完毕), jRoot.event(事件添加删除方法), jRoot.browser(浏览器判断方法), jRoot.iUtility(取元素高宽等常见方法), jRoot.tween(主要实现缓动效果的算法)六个部分。以后还会陆续添加jRoot.ajax等部分。
jRoot.js代码如下:
Code$ = jRoot = function(selector){
if(window == this) {return new jRoot(selector);}
this.initialize(selector);
};
//jRoot基本函数
jRoot.fn = jRoot.prototype = {
initialize: function(selector){
if(typeof selector == 'string'){
var elem = document.getElementById(selector);
if(elem){
this.length = 1;
this[0] = elem;
}
}else{
this.length = 1;
this[0] = selector;
};
return this;
},
init: function(){
},
get: function(){
return this[0];
},
cleanWhitespace: function(){
},
insertBefore: function(){
},
appendChild: function(){
},
clone: function(){
},
html: function(){
},
bind: function(object, fun){
//arguments中第一个参数为object, 第二个参数fun, 其后的参数为fun的参数
if(arguments.length < 2) return;
var args = [];
for (var i = 2; i < arguments.length; i++){
args.push(arguments[i]);
}
return function() {
//注意：apply函数的第二个参数是一个参数数组. 即func.apply(func1,[var1,var2,var3])
return fun.apply(object, args);
}
},
bindAsEventListener: function(object, fun) {
return function(e) {
//call的参数调用方法：func.call(func1,var1,var2,var3)
return fun.call(object, (e || window.event));
}
},
css: function(name){
var result;
elem = this[0];
name = name.toLowerCase();
if(elem.style && elem.style[name]){
result = elem.style[name];
}
else if(document.defaultView && document.defaultView.getComputedStyle){ // firefox,opera,safari
computedStyle = document.defaultView.getComputedStyle(elem, null);
result = computedStyle.getPropertyValue(name);
}
else if(elem.currentStyle){ // ie
name = name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){return a.toUpperCase()+b.toLowerCase();}); //转化为驼峰写法
result = elem.currentStyle[name];
}
return result;
}
};
//扩展
//先编写自己的插件 jRoot.plugin = {youPlugIn: function(options){};}
//再调用jRoot.fn.extend(jRoot.plugin);
//这样youPlugIn就加入进来了，这样就可以直接使用jRoot().youPlugIn();
jRoot.extend = jRoot.fn.extend = function(destination, source){
if(!source){
source = destination;
destination = this;
};
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
//jRoot文档加载类
jRoot.doc = {
isReady: false,
isReadyBound: false,
readyList: [],
ready:function(fn){
jRoot.doc.bindReadyListener();
if(jRoot.doc.isReady){
fn.apply(this);
}else{
jRoot.doc.readyList.push(fn);
}
},
bindReadyListener:function(){
if(jRoot.doc.isReadyBound){
return;
}
jRoot.doc.isReadyBound = true;
jRoot.event.add(window, 'load', jRoot.doc.fireReadyListener);
},
fireReadyListener:function(){
if(!jRoot.doc.isReady){
jRoot.doc.isReady = true;
if(jRoot.doc.readyList){
//var args = Array.prototype.slice.call(arguments, 0);
for(var i=0; i<jRoot.doc.readyList.length;i++){
jRoot.doc.readyList[i].apply(this);
}
jRoot.doc.readyList = null;
}
}
}
};
jRoot.ready = jRoot.fn.ready = jRoot.doc.ready;
//事件添加删除方法
jRoot.event = {
add:function(elem, eventName, func){
if(window.attachEvent){
elem.attachEvent('on' + eventName, func);
}else if(window.addEventListener){
elem.addEventListener(eventName, func, false);
}
},
remove:function(elem, eventName, func){
if(window.detachEvent){
elem.detachEvent('on' + eventName, func);
}else if(window.removeEventListener){
elem.removeEventListener(eventName, func, false);
}
}
};
//浏览器判断方法
var userAgent = navigator.userAgent.toLowerCase();
jRoot.browser = {
isIE: (document.all) ? true : false,
isIE6: document.all && ([/MSIE (\d)\.0/i.exec(userAgent)][0][1] == 6),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
//元素高宽等常见方法
jRoot.iUtility = {
getScroll : function (e)
{
var t, l, w, h, iw, ih;
if (e && e.nodeName.toLowerCase() != 'body') {
t = e.scrollTop;
l = e.scrollLeft;
w = e.scrollWidth;
h = e.scrollHeight;
iw = 0;
ih = 0;
} else {
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
}
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
},
getPositionLite : function(el)
{
var x = 0, y = 0;
while(el) {
x += el.offsetLeft || 0;
y += el.offsetTop || 0;
el = el.offsetParent;
}
return {x:x, y:y};
},
getSizeLite : function(el)
{
return {
wb:el.offsetWidth||0,
hb:el.offsetHeight||0
};
},
getClient : function(e)
{
var h, w, de;
if (e) {
w = e.clientWidth;
h = e.clientHeight;
} else {
de = document.documentElement;
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
}
return {w:w,h:h};
}
};
/*
算法来源：http://www.robertpenner.com/easing/
t：current time（当前时间）
b：beginning value（初始值）
c： change in value（变化量）
d：duration（持续时间）
返回：b+当前变化量。当当前时间=持续时间时，返回b+c
*/
jRoot.tween = {
/*无缓动效果*/
linear: function(t,b,c,d){ return c*t/d + b; },
/*二次方的缓动（t^2）*/
quad: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t + b;
},
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
},
/*三次方的缓动（t^3）*/
cubic: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
},
/*四次方的缓动（t^4）*/
quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
},
/*五次方的缓动（t^5）*/
quint: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
},
/*正弦曲线的缓动（sin(t)）*/
sine: {
easeIn: function(t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOut: function(t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOut: function(t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
},
/*指数曲线的缓动（2^t）*/
expo: {
easeIn: function(t,b,c,d){
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOut: function(t,b,c,d){
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOut: function(t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
/*圆形曲线的缓动（sqrt(1-t^2)）*/
circ: {
easeIn: function(t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOut: function(t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
},
/*指数衰减的正弦曲线缓动*/
elastic: {
easeIn: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
},
easeInOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
},
/*超过范围的三次方缓动（(s+1)*t^3 - s*t^2）*/
back: {
easeIn: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
},
/*指数衰减的反弹缓动*/
bounce: {
easeIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
}
下面写了个myPlugin插件,
jRoot.plugin = {
myPlugin:function(options){ //options可以传入一些参数
this.init = function(){
};
this.method = function(){
};
this.init();
return this;
};
}
在这个插件文件myPlugin.js最后部分写上jRoot.fn.extend(jRoot.plugin);或者jRoot.prototype.extend(jRoot.plugin);
其中extend方法：
jRoot.extend = jRoot.fn.extend = function(destination, source){
if(!source){
source = destination;
destination = this;
};
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
这样这个插件方法就扩展到jRoot.prototype方法下面了。
调用的时候就可以使用$('elementId').myPlugin({});
大概的框架就是这样的。下面是写的几个小插件:
jRoot.iDrag.js 拖拽效果控件
jRoot.iMaskLay.js 遮盖效果控件
jRoot.iDialogBox.js 对话框控件
jRoot.iRichEditor.js 富文本编辑器
jRoot.iSuggest.js 智能提示框
jRoot.iTabPanel.js 多页签控件
jRoot.iCoupletAd.js 对联控件
jRoot.iImageMenu.js 多图片滑动效果控件
jRoot.iMarquee.js 文字滚动效果控件
下载地址
posted on 2009-03-25 23:24 XiaoShan 阅读(3651) 评论(14) 编辑 收藏 举报
