页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → js类学习 → 正文内容 JObj 渐变效果

用JObj实现的渐变效果

发布：dxy 字体：[增加减小] 类型：转载

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

点击运行可以看到效果:

<!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="http://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 全选提示:你可先修改部分代码,再按运行]

Tags：JObj 渐变

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：JObj预览一个JS的框架
下一篇文章：不错的JavaScript面向对象的简单入门介绍

·在百度中搜索关于“用JObj实现的渐变效果”相关内容
·在谷歌中搜索关于“用JObj实现的渐变效果”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行