<!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=gb2312" />
<title>Javascript 颜色渐变效果</title>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};var ColorFade = Class.create();
ColorFade.prototype = {
initialize: function(Obj, options) {
this._obj = $(Obj);
this._timer = null;
this.SetOptions(options);
this.Step = Math.abs(this.options.Step);
this.Speed = Math.abs(this.options.Speed);
this.StartColor = this._color = this.GetColors(this.options.StartColor);
this.EndColor = this.GetColors(this.options.EndColor);
this._arrStep = [this.GetStep(this.StartColor[0], this.EndColor[0]), this.GetStep(this.StartColor[1], this.EndColor[1]), this.GetStep(this.StartColor[2], this.EndColor[2])];
this._set = !this.options.Background ? function(color){ this._obj.style.color = color; } : function(color){ this._obj.style.backgroundColor = color; };
this._set(this.options.StartColor);
var oThis = this;
addEventHandler(this._obj, "mouseover", function(){ oThis.Fade(oThis.EndColor); });
addEventHandler(this._obj, "mouseout", function(){ oThis.Fade(oThis.StartColor); });
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
EndColor: "#DDC",//定义要渐变的颜色
Background: false,//是否背景变色(默认文字)
Step: 20,//渐变级数
Speed: 10//渐变速度
};
StartColor: "#000",//定义原来的颜色
Object.extend(this.options, options || {});
},
//获取颜色数据
GetColors: function(sColor) {
sColor = sColor.replace("#", "");
var r, g, b;
if (sColor.length > 3) {
r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);
} else {
r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1); r += r; g += g; b += b;
}
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
},
//获取渐变颜色数据
GetColor: function(c, ec, iStep) {
if (c == ec) { return c; }
if (c < ec) { c += iStep; return (c > ec ? ec : c); }
else { c -= iStep; return (c < ec ? ec : c); }
},
//获取渐变级数
GetStep: function(start, end) {
var iStep = Math.abs((end - start) / this.Step);
if(iStep > 0 && iStep < 1) iStep = 1;
return parseInt(iStep);
},
//颜色渐变
Fade: function(rColor) {
clearTimeout(this._timer);
var er = rColor[0], eg = rColor[1], eb = rColor[2], r = this.GetColor(this._color[0], er, this._arrStep[0]), g = this.GetColor(this._color[1], eg, this._arrStep[1]), b = this.GetColor(this._color[2], eb, this._arrStep[2]);
this._set("#" + Hex(r) + Hex(g) + Hex(b));
this._color = [r, g, b];
if(r != er || g != eg || b != eb){ var oThis = this; this._timer = setTimeout(function(){ oThis.Fade(rColor); }, this.Speed); }
}
};//返回16进制数
function Hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }
}//仿asp的mid 截字
function Mid(string, start, length) {
if (length) return string.substring(start, start + length);
else return string.substring(start);
}
</script>
</head><body><div id="idDiv" style="padding:10px;">颜色渐变效果</div><style type="text/css">
#idMenu{ clear:both; height:35px; background:#DBDBDB; width:560px;}
#idMenu li{ float:left; line-height:25px; width:100px; text-align:center; margin:5px; cursor:pointer;}
</style><ul id="idMenu">
<li>
菜单
</li>
<li>
菜单
</li>
<li>
菜单
</li>
<li>
菜单
</li>
<li>
菜单
</li>
</ul><script>
new ColorFade("idDiv", { StartColor: "#111", EndColor: "#eee" });
new ColorFade("idDiv", { StartColor: "#eee", EndColor: "#111", Background: true });var objs = document.getElementById("idMenu").getElementsByTagName("li");
for(var i = 0, len = objs.length; i < len; i++){
new ColorFade(objs[i], { StartColor: "#333", EndColor: "#fff", Speed: 20 });
new ColorFade(objs[i], { StartColor: "#f6f6f6", EndColor: "#3ea936", Background: true, Speed: 20 });
}
</script>
</body>
</html>这代码看着不怎么懂，挺晕的
第一：var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};这里把一个方法赋给美元符是什么意思。为什么要用到这个￥
第二：var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}这里create:function()的create什么意思（难道就像别的程序里面单单一个标识没有任何意义吗？---我是这么理解的，不过看样子应该不对）
第三：this._set("#" + Hex(r) + Hex(g) + Hex(b));
这里面的#又是什么意思。
最后：就是这些addeventhandler ,attachevent .addeventlistener ,eventhandler
前面这些addeventlistener,attachevent这个是监听事件，大概意思是懂了。
就是不知道这些对象各起来是如何运行的，
其实这里面也是涉及到委托和事件这种意思（一直都搞得晕乎的，）希望有人回答下
thanks
create:function(){...} 是定义了个函数明叫create 冒号后是它的实现.
#223344 等是css设置颜色时用的.
addEventListener attachEvent是为一个dom对象绑定事件处理程序,为了兼容浏览器,ie支持attachEvent,ff支持addEventListener
//为了兼容IE和支持DOM标准的浏览器的元素添加事件的处理方法的
//这样不管是什么浏览器都可以为元素的事件添加处理方法
//如果我们单单使用element.attachEvent("name",function)的话就只能支持IE了
//addEventHandler(document.getElementById("elID","click",function1);
//addEventHandler(document.getElementById("elID","click",function2);
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {//支持DOM标准的浏览器的元素添加事件的处理方法
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {//为IE添加事件的处理方法
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {//为一般的浏览器的事件处理方法属性赋值
oTarget["on" + sEventType] = fnHandler;
}
};
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
var EventUtil=new Object;
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler
}
};
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false);
}else if(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=null;
}
};
function HandleClick(){
alert("Click");
var oDiv=document.getElementById("div1");
EventUtil.removeEventHandler(oDiv,"click",HandleClick); // 1
}
window.onload=function(){
var oDiv=document.getElementById("div1");
EventUtil.addEventHandler(oDiv,"click",HandleClick); // 2}
</script>
</head><body>
<div id="div1" style="background-color:#FF0000; width:100px; height:40px;">跨平台事件</div>
</body>
</html>注：语句1放在HandleClick函数中，表示发生完Click事件执行完HandleClick函数后，再执行removeEventUtil 函数从而删除事件处理函数。若将语句1放在语句2后，表示给Click事件分配完事件处理函数后，就删除所分配的函数。此时Click事件还没有发生。当发生Click时，因为所分配的事件处理函数已经被删除了，所以 alert（“Click”）语句不会被执行，警告框不会出现。所以语句1必须放在HandleClick函数中
oTarget.addEventListener(sEventType, fnHandler, false);
这段话里的addeventlistener函数里面的false参数是什么意思
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
这段代码里定义一个函数create:function(){}
但这方法里面返回的是这个方法本身吗？
这句话：return function()
{
this.initialize.apply(this,arguments)
}
这个this.initialize.apply(this,arguments)
又是什么意思呢？
现在就去。
false由内向外触发，可是我怎么感觉false是由外向内的。
先执行外的再执行内的。。囧。~！
true表示是，则会从外向内，false，默认，ie只能这样但是表现给我们看到只能是事件触发顺序
捕获的应该是事件吧？
捕获用户的动作？
JS里的冒泡和那些高级语言里的意思应该一样吧
能否详细解释一二？
第9章 第2节，里讲的很详细还有图解
看得很累，不明白的。
主要是类似这种定义的不明白
creat:function{
return function{
}}
还有就是刚刚那个this.initial.replay()
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}var Class={};//声明一个空对象
var Class={create:function(){}}//声明一个对象class，其有一个空方法create(也可以理解为class的一个属性)return function() {}//create方法返回这个方法this.initialize.apply(this,arguemtns);// 调用 当前实例的ininiialize方法，
//并将this指针传入这个方法，这样在apply中使用中可以直接用this来获取当前实例，并保持原来的参数apply方法作用
var obj="aa";
var fun=function() {
alert(this);
}
fun.apply(obj);//会弹出aa