JavaScript滚动条的制作
效果演示
这个效果的制作是借助setTimeout的第三个参数。setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用：
1 |
setTimeout(function(obj){ |
2 |
alert(obj.a); |
3 |
}, 2000, {a:1}); |
即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。
1 |
setTimeout(function(obj){ |
2 |
obj.method(); |
3 |
}, 2000, obj); |
上次看到一个setTimeout的一个用法：
1 |
var arr = [1,9,2,8,3,7,4,6,4,5]; |
2 |
for(var i = 0, len = arr.length; i < len; i++){ |
3 |
setTimeout(function(x){ |
4 |
console.log(x); |
5 |
},arr[i],arr[i]); |
6 |
} |
虽然这个并不是什么好的用法，这里setTimeout的第三个参数主要得到了除IE外的系列浏览器的支持。
要让IE支持的话，可以按下面方法进行扩展：
01 |
(function(w){ |
02 |
//ie传入第三个参数 |
03 |
if(!+[1,]){//除IE外，!+[1,]都是返回false |
04 |
(function(overrideFn){ |
05 |
w.setTimeout = overrideFn(w.setTimeout); |
06 |
w.setInterval = overrideFn(w.setInterval); |
07 |
})(function(originalFn){ |
08 |
return function(code,delay){ |
09 |
var args = Array.prototype.slice.call(arguments,2); |
10 |
return originalFn(function(){ |
11 |
if(typeof code == 'string'){ |
12 |
eval(code); |
13 |
}else{ |
14 |
code.apply(this,args); |
15 |
} |
16 |
},delay); |
17 |
} |
18 |
}) |
19 |
} |
20 |
})(window) |
如果有第三个参数，某些情况下的调用就可以方便的处理回调函数中当前对象的问题，写起来好看点。扩展一下Function，增加一个延时调用（参考而已）：
01 |
function.prototype.delay = function(){ |
02 |
var args = Array.prototype.slice.call(arguments,0); |
03 |
setTimeout(function(fn){ |
04 |
fn.apply('',args.slice(1)); |
05 |
},args[0],this); |
06 |
} |
07 |
var fn = function(x){ |
08 |
alert(x) |
09 |
}; |
10 |
fn.delay(1000,'xesam'); |
下面是模拟进度条的代码：
01 |
<script type="text/javascript"> |
02 |
function Load(id,width){ |
03 |
this.ele = document.getElementById(id); |
04 |
this.indicator = document.createElement('div'); |
05 |
this.width = (width > 0 && width) || 300; |
06 |
this.init(); |
07 |
} |
08 |
Load.prototype = { |
09 |
constructor:Load, |
10 |
init:function(){ |
11 |
this.ele.style.width = this.width + 'px'; |
12 |
this.ele.appendChild(this.indicator); |
13 |
var iStyle = this.indicator.style; |
14 |
iStyle.width = 0; |
15 |
iStyle.height = '100%'; |
16 |
iStyle.background = '#ff5500'; |
17 |
}, |
18 |
start:function(){ |
19 |
//this.init(); |
20 |
this.loading(); |
21 |
}, |
22 |
loading:function(){ |
23 |
this.timer = setTimeout(function(obj){ |
24 |
var t = obj.indicator.data || 0; |
25 |
if(t < obj.width){ |
26 |
obj.indicator.style.width = t + 1 +'px'; |
27 |
obj.indicator.data = t + 1; |
28 |
obj.loading(); |
29 |
}else{ |
30 |
clearInterval(obj.timer); |
31 |
} |
32 |
},10,this); |
33 |
}, |
34 |
stop:function(){ |
35 |
clearTimeout(this.timer); |
36 |
} |
37 |
} |
38 |
var load_1 = new Load('loading',300); |
39 |
load_1.start(); |
40 |
</script> |
浙公网安备 33010602011771号