用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
渐变

JavaScript之信息的封装 js对象入门
下面对代码的封装是比较常用的，也比较好理解，只有先掌握了这些，才能更深入的了解面向对于以及json格式的定义方法。
2010-04-04
JavaScript 继承使用分析
继承,通俗地说,之前你写过一些类,这些类中有一些是而你现在要写的类的功能的子集或者基本相同,那么你不用完全重新写一个新的类,你可以把之前写的类拿过来使用.这样的一种代码重用过程就叫做继承
2011-05-05
JavaScript 面向对象之命名空间
如果写一堆function难免会出现变量或函数的命名冲突，应用了命名空间这种情况就从此杜绝了，而且代码易于管理。
2010-05-05
面向对象的javascript（笔记）
面向对象的javascript之学习笔记，需要学习的朋友可以参考下，脚本之家之前更新了不少这方便的文章。
2009-10-10
学习面向对象之面向对象的基本概念:对象和其他基本要素
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010-11-11
javascript 单例模式演示代码 javascript面向对象编程
单例模式的好处就是:类只实例化一次,省资源,节省开销,提高速度，学习js面向对象编程的朋友可以参考下。
2010-04-04
JavaScript接口实现代码（Interfaces In JavaScript）
接口是面向对象编程里的重要特性，遗憾的是JavaScript并没有提供对接口的支持！怎么实现接口呢？
2010-06-06
JavaScript 面向对象的私有成员和公开成员
这节来说下JavaScript的私有成员和公开成员，虽然JavaScript没有private和public关键字，但还是那句话——作为开发人员我们要有面向对象的思想！
2010-05-05
JavaScript RegExp方法获取地址栏参数(面向对象)
个人认为循环用得多不是什么好事。这里推荐一种利用OO思想加上RegExp的方法，使它更灵活、高效。
2009-03-03
JavaScript面象对象设计
学习js的高境界就是使用面向对象的方法，实现js的调用
2008-04-04