请帮忙解读一段代码..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<style type= "text/css ">
.wc, #wc1, #wc2 {
position:absolute;
border-width:0px;
z-index:2;
left:0px;
top:0px;
display:none;
}
#wc1 {
width:320px;
height:240px;
background-color:#FFCC00;
}
#wc2 {
width:420px;
height:340px;
background-color:#CCCCCC;
}
.wc {
z-index:1;
}
</style>
<script type= "text/javascript ">
(function () {
var interval = window.setInterval;
window.setInterval = function (a, b) {
var fun;
if ( "function " == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
};
} else {
fun = a;
}
return interval(fun, b);
};
})();
function createOpenMenu(changeTime) {
var intervalTime = 5, wc_number = 0;
function addIframe() {
//添加一个Iframe为了遮盖住IE的Select...
var ifr = document.createElement( "iframe ");
ifr.setAttribute( "id ", "ifr_ " + (++ wc_number));
ifr.setAttribute( "className ", "wc ");
ifr.setAttribute( "class ", "wc ");
document.body.appendChild(ifr);
return $( "ifr_ " + wc_number); //返回新加入的Iframe...
}
function changeMenu(o) {
//改变对象属性..以达到收缩效果...
if (eval(o.bool)) {
o.t_iframe.style.width = o.style.width = (o.t_num * o.t_width) + "px "; //设置Iframe和div的宽度..
o.t_iframe.style.height = o.style.height = (o.t_num * o.t_height) + "px "; //设置Ifrmae和div的高度..
o.t_iframe.style.left = o.style.left = o.t_left - o.offsetWidth / 2 + "px "; //设置Iframe和div的Left位置...
} else {
if (/ </.test(o.bool)) { //如果是over的时候结束了的话,那么就显示内容..
o.innerHTML = o.context;
} else { //否则就把Iframe和div隐藏...
o.t_iframe.style.display = o.style.display = "none ";
}
window.clearInterval(o.timer); //清楚记时器
}
}
function over() {
//当鼠标经过时..执行...
var o = this.o;
var par = this.p;
o.bool = "++ o.t_num < changeTime "; //改变判断..
if (o.t_num <= 0 || "undefined " == typeof o.timer) { //如果记时器为空的时候
o.innerHTML = " "; //内容设置为空
o.t_iframe.style.display = o.style.display = "block "; //设置为显示
o.t_iframe.style.width = o.style.width = "0px ";
o.t_iframe.style.height = o.style.height = "0px ";
o.t_iframe.style.left = o.style.left = o.t_left - o.offsetWidth / 2 + "px "; //设置Iframe和div的left位置..
o.t_iframe.style.top = o.style.top = par.offsetTop + par.offsetHeight - 5 + "px "; //设置Iframe和div的top位置..
o.timer = window.setInterval(changeMenu, intervalTime, o); //建立记时器
}
window.clearInterval(o.clear);
}
function out(o) {
//当鼠标移开时..执行...
o.bool = "-- o.t_num > 0 "; //改变判断..
o.innerHTML = " ";
if (o.t_num > = changeTime) {
o.timer = window.setInterval(changeMenu, intervalTime, o); //建立记时器
}
window.clearInterval(o.clear);
}
function execOut() {
var o = this.o;
o.clear = window.setInterval(out, 500, o);
}
this.add = function (to, eo) {
//添加对象,设置一些参数...
eo.t_num = 0;
eo.t_iframe = addIframe();
eo.style.display = "block ";
eo.t_left = to.offsetLeft + to.offsetWidth / 2;
eo.t_width = (eo.offsetWidth) / changeTime;
eo.t_height = (eo.offsetHeight) / changeTime;
eo.style.display = "none ";
eo.context = eo.innerHTML;
to.o = eo.o = eo;
to.p = eo.p = to;
to.onmouseover = eo.onmouseover = over;
to.onmouseout = eo.onmouseout = execOut;
}
}
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
var menu = new createOpenMenu(20);
menu.add($( "show_wc1 "), $( "wc1 "));
menu.add($( "show_wc2 "), $( "wc2 "));
menu = null;
}
</script>
</head>
<body>
<div id= "wc1 "> 一：好多的内容的说...... </div>
<div id= "wc2 "> 二：好多的内容的说...... </div>
<center>
<button id= "show_wc1 "> show_wc1 </button>
<button id= "show_wc2 "> show_wc2 </button>
<br />
<select style= "width:150px; "> </select>
</center>
</body>
</html>
-----------------
1
(function(){...})();是什么意思
2
window.setInterval = function (a, b) {}是什么意思 ?
只见过window.setInterval(functionname,1000)这样的
如果是setInterval方法重新定义的话,不是该用到prototype么?
3
Array.prototype.slice.call(arguments, 2);是在做什么?
只能理解下面这样的,可不理解上面的,特别是把arguments放这里.
Array.prototype.slice = function(){...}
var arr =[];
arr.slice.call(obj,arg);
4
a.apply(null, arg); 是在做什么?
一没方法,二没目标对象.
5
o.timer = window.setInterval(changeMenu, intervalTime, o)
window.setInterval = function (a, b){}
function changeMenu(o) {}
这3者是怎么联系起来的.o这个参数怎么传递的?
[解决办法]
1
返回function() {..}并且执行它。
其中第一个()起到返回的作用。。则第二个()起到执行的作用。。
2
window.setInterval = function (a, b) {}是什么意思 ?
修改window.setInterval 方法
为function (a, b) {...}这个函数
3
Array.prototype.slice.call(arguments, 2);是在做什么?
arguments对象有length属性和0-n属性。。
即
Array.prototype.slice方法是类似
function (i[, n]) {
//n就不说了。。
var a;
if (this.length <= i) return;
for (a = [] ; i < this.length ; i ++) a[a.length] = this[i];
return a;
}
然而Function.prototype.call方法又可以改变被摧残函数的this指针，为形式参数0即arguments对象。。
所以可以返回arguments对象的
第三个形式参数到arguments.length - 1个形式参数。。。
4 a.apply(null, arg); 是在做什么?
即
执行a这个函数 并且不改变this指针，传给a函数的参数为arg的每一个元素
效果相当于
eval( "a( " + arg.join( ", ") + ") ");
上面都看懂了第5个就不用我说了吧？
