用JObj实现的渐变效果

更新时间：2008年03月13日 21:09:53 作者：

用链式操作，的确很简单！不过，还不得要领。要继续修改！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>脚本之家 <A href="https://www.jb51.net</title">www.jb51.net</title</A>> <script language="javascript" type="text/javascript"> (function($){  $.isPercent = function(p){   return /^(\d*)(\.?)(\d*)%$/.test(p);  }    var __alert__ = $.alert;    $.alert = function(){   var arg,s="";   for(var i=0;arg = arguments[i];i++){    s += arg + "\n"   }   __alert__(s);  } })(window); String.prototype.trim = function(){  return this.replace(/(^\s*)|(\s*$)/g, "");  } var JObj = {}; (function($){  /*----------------------------------------------------------------------------  Config  Private  ----------------------------------------------------------------------------*/  var Config = {};  (function($){   $.Const   = {};   $.Path   = {};   $.loadedModule = {};  })(Config)    $.$getConfigConst = function(){   return Config.Const;     }    $.$getConfigPath = function(){   return Config.Path;  }    $.$getConfigLoaded = function(){   return Config.LoadedModule;   }    /*----------------------------------------------------------------------------  Error  JObj.Error  ----------------------------------------------------------------------------*/     $.Error = {};  (function($){   $.debug = true;      var ErrorList = {};      $.$pushError = function(msg,e){       }     })($.Error)    /*----------------------------------------------------------------------------  Dom operater  JObj.Dom Object  ----------------------------------------------------------------------------*/    var DomObj = function(){   var $ = this;   var object;      $.$setHTMLObject = function(p){    object = p;    //alert($.$setHTMLObject.caller);   }      $.$getHTMLObject = function(){    return object;    }      $.$appendTo = function(p){    f = JObj.Dom.$(p,false) || document.body;    f.appendChild(object);    return $;   }      $.$attr = function(k,v){    object.setAttribute(k,v);    object[k] = v;    return $;   }      $.$attrs = function(rule){    var k;    for(k in rule){     $.$attr(k,rule[k]);    }    return $;   }      $.$css = function(k,v){    object.style[k] = v;    return $;   }      $.$csss = function(rule){    var k;    for(k in rule)     $.$css(k,rule[k]);    return $;   }  }    $.Dom = {};   (function($,$$){      var domObj = new DomObj();      $.$ = function(p,f){    var o = typeof(p) == "object" ? p : document.getElementById(p);    if(f !== false){     domObj.$setHTMLObject(o);     return domObj;    }else return o;   }      $.$tag = function(p){    return o = document.getElementsByTagName(p);   }      $.$c = function(p,n){    var o;    try{     if(n) o = document.createElemnet("<" + p + " name='" + n + "'>");     else  o = document.createElement(p);    }catch(e){     o = document.createElement(p);     o.name = name;    }        domObj.$setHTMLObject(o);    return domObj;   }  })($.Dom,$)    /*----------------------------------------------------------------------------------  Browser check  JObj.Browser Object  ----------------------------------------------------------------------------------*/    $.Browser = {};  (function($){         var $fv = function(){    var f="-1",n=navigator;    if (n.plugins && n.plugins.length) {     for (var ii=0;ii<n.plugins.length;ii++) {      if (n.plugins[ii].name.indexOf('Shockwave Flash')!=-1) {       f=n.plugins[ii].description.split('Shockwave Flash ')[1];       break;      }     }    } else if (window.ActiveXObject) {     for (var ii=10;ii>=2;ii--) {      try {       var fl=eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash."+ii+"');");       if (fl) { f=ii + '.0'; break; }      }catch(e) {}     }    }       if(f == "-1") return f;    else return f.substring(0,f.indexOf(".")+2)      }        //Notice : Firefox ,NS can't use property: name (case sensitive)! Because it's a hold field ,and it's values is anonymous.   var n_ = navigator,s_ = screen;      var b = n_.appName;   var ua = n_.userAgent.toLowerCase();      $.name = "Unknow";   $.safari = ua.indexOf("safari")>-1;  // always check for safari & opera   $.opera = ua.indexOf("opera")>-1;    // before ns or ie   $.firefox = ua.indexOf('firefox')>-1; // check for gecko engine    $.ns = !$.firefox && !$.opera && !$.safari && (b=="Netscape");   $.ie = !$.opera && (b=="Microsoft Internet Explorer");      $.name = ($.ie ? "IE" : ($.firefox ? "Firefox" : ($.ns ? "Netscape" : ($.opera ? "Opera" : ($.safari ? "Safari" : "Unknow")))));      switch($.name){    case "Opera":     $.fullVersion = ua.substr(ua.indexOf("opera") + 6);     break;    case "IE":     $.fullVersion = ua.substr(ua.indexOf("msie") + 5).split(";")[0];     break;    case "Firefox":     $.fullVersion = ua.substr(ua.indexOf("firefox") + 8);     break;    case "Safari":     $.fullVersion = ua.substr(ua.indexOf("version") + 8).split(" ")[0];     break;    case "Netscape":     $.fullVersion = ua.substr(ua.indexOf("netscape") + 9);     break;    default:     $.fullVersion = "-1";   }   $.version = parseFloat($.fullVersion);      $.flashVersion = $fv();   $.cookieEnabled = n_.cookieEnabled;   $.javaEnabled = n_.javaEnabled();     })($.Browser);    /*----------------------------------------------------------------------------------  Cookie Operate  JObj.Cookie Object  ----------------------------------------------------------------------------------*/  $.Cookie = {};  (function($){   $.$get = function(){    var cookies = document.cookie;    if (cookies == "") return;    cookies = cookies.split(';');    for(var i=0; i < cookies.length; i++)  // Break each pair into an array     cookies[i] = cookies[i].split('=');    for(var i = 0; i < cookies.length; i++) {     $[(cookies[i][0]).trim()] = decodeURIComponent(cookies[i][1]);    }    }   $.$get();      $.$save = function(daysToLive, path, domain, secure){    var dt = (new Date()).getTime() + daysToLive * 24 * 60 * 60 * 1000;    for(var prop in $) {     if (typeof $[prop] == 'function')      continue;          var cookie = "";     cookie = prop + '=' + encodeURIComponent(this[prop]);          if (daysToLive || daysToLive == 0) cookie += ";expires=" + new Date(dt).toUTCString();      if (path) cookie += ";path=" + path;     if (domain) cookie += "; domain=" + domain;     if (secure) cookie += ";secure";     document.cookie = cookie;    }   }      $.$remove = function(path, domain, secure){    $.save(0, path, domain, secure);    for(var prop in this) {     if (typeof this[prop] != 'function')      delete this[prop];    }   }   })($.Cookie);    /*------------------------------------------------------------------------------  StyleSheets Operate;  ------------------------------------------------------------------------------*/  $.styleSheets = {};    /*------------------------------------------------------------------------------  Ajax Operate;  ------------------------------------------------------------------------------*/    $.Ajax = {};  (function($,$$){   $.$getXMLHttp = function(){    var xmlHttp = null;    if($$.Browser.ie && $$.Browser.version < 7){     var v = ['MSXML2.XMLHTTP.8.0', 'MSXML2.XMLHTTP.7.0', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP.2.6', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];     if(typeof(Config.Const.ACTIVEXOBJECT_XMLHTTP) == "string")      v[0] = Config.Const.ACTIVEXOBJECT_XMLHTTP;           for(var i=0;v_ = v[i];i++){      try{       xmlHttp = new ActiveXObject(v_);       Config.Const.ACTIVEXOBJECT_XMLHTTP = v_;       break;      }catch(e){}     }    }else{     xmlHttp = new XMLHttpRequest();    }        if(xmlHttp == null){     alert("你的系统不支持AJAX");    }    return xmlHttp;   }      $.$load = function(){         }      $.$attr = function(p,k){    return p.attributes.namedItem(k);   }  })($.Ajax,$);    var $getBasePath = function(){   var scripts,script;   scripts = document.scripts || $.Dom.$tag("SCRIPT");   for(var i=0;script = scripts[i];i++){    var matchs = script.src.match(/(.*)JObj.js$/i) || [];    if(1 in matchs){     basePath = matchs[1];     Config.Path.basePath = matchs[1];     break;    }   }  }  $getBasePath(); })(JObj); </script> </head> <body> <div id="aa"></div> <script language="javascript" type="text/javascript"> for(var i=0;i<20;i++){  h = w = 400 - i * 20 + "px";  c = "#" + (parseInt("ffffff",16) - i * 10).toString(16);  JObj.Dom.$c("DIV")   .$attr("id","div_" + i)   .$appendTo("div_" + (i - 1))   .$csss({position:"relative",top:"10px",left:"10px"})   .$css("width",w)   .$css("height",h)   .$css("backgroundColor",c); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JObj
渐变

JObj预览一个JS的框架
我说过，我要写一个JS的框架，我知道有人会从心底BS我，但是：你继续BS吧！我还是要写我的JOBJ。
2008-03-03
javascript 面向对象全新理练之原型继承
利用原型继承的关键有两步操作，需要的朋友可以参考下。
2009-12-12
前端开发必须知道的JS之原型和继承
原型和闭包是Js语言的难点，此文主要讲原型及原型实现的继承，在（二）中会讲下闭包，希望对大家有所帮助。若有疑问或不正之处，欢迎提出指正和讨论。
2010-07-07
javascript 写类方式之五
用构造函数+原型定义一个类；同一构造函数可以定义出多个类型
2009-07-07
javascript对象小结
这次主要测试了几个主要的对象，包括string,date,数组。用date对象做了个类似倒计时的功能，呵呵
2010-07-07
JavaScript 面向对象代码实践
JavaScript面向对象代码的写法与其它常见语言（Java C# C++）几乎完全不同。
2010-02-02
javascript中最常用的继承模式组合继承
组合继承避免了原型链和借用构造函数的缺陷，成为JavaScript中最为常用的继承模式
2010-08-08
JS 面向对象的5钟写法
定义Circle类，拥有成员变量r，常量PI和计算面积的成员函数area()
2009-07-07
javascript 面向对象编程万物皆对象
javascript几乎成了如今web开发人员必学必会的一门语言，但很多人却只停在了一些表单验证等基础操作层面上，在面向对象语言大行其道的当下，我们需要去学习javascript的面向对象的知识，以便更好的掌握javascript、为深入理解各种脚本框架打好基础。
2009-09-09
javascript 写类方式之三
用构造函数来定义类属性（字段）用原型方式来定义类的方法。就有了第三种方式。这种方式貌似采用的人较多。
2009-07-07