用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 面向对象命名空间
作用主要为了防止类名冲突，相同的类名只要属于不同的命名空间，便不会冲突。
2010-05-05
Javascript 面向对象（三）接口代码
接口：对实现某一种任务、功能，目的等，所规定的一些原则
2012-05-05
JS 对象介绍
JS 对象介绍,需要的朋友可以参考下。
2010-01-01
js类后台管理菜单类-MenuSwitch
js类后台管理菜单类-MenuSwitch...
2007-09-09
js 简单类代码
js类的封装方法，说实话我也是新手，一直没涉及到js的类，下面的代码，应该看的懂，不懂就先用脑子记下了，见得多了就会了
2008-05-05
Javascript 面向对象之重载
在面向对象语言里重载是很重要的一个特性，而JavaScript这个自称面向对象的语言竟然没有直接提供重载的功能。
2010-05-05
JavaScript面向对象之静态与非静态类
使用JavaScript面向对象完全出于偶然，因为大部分时间我都是在无图形界面的环境下工作，有时候就算是介入了web客户端的工作的时候，在写js和ajax时，最多的也只是写写function，从没有考虑过要使用JavaScript面向对象这么高级的技巧。
2010-02-02
Javascript面向对象编程（二）构造函数的继承
这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。
2011-08-08
JavaScript面向对象设计二构造函数模式
在Javascript面向对象设计一——工厂模式中介绍了使用CreateEmployee（）函数创建员工类。ECMAScript中的构造函数可以用来创建特定类型的对象，如Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中，此外也可以创建自定义的构造函数，从而创建自定义对象类型的属性和方法
2011-12-12
JavaScript 面向对象编程（1）基础
自从有了Ajax这个概念，JavaScript作为Ajax的利器，其作用一路飙升。JavaScript最基本的使用，以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。
2010-05-05

用JObj实现的渐变效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具