用JObj实现的渐变效果_js面向对象

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>脚本之家 <a href="http://www.jb51.net</title">www.jb51.net</a> </title>> <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> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]