用JavaScript操作CSS滤镜实现最近新闻旁边的“new”

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 用JavaScript操作CSS滤镜实现最近新闻旁边的“new” </ title >
5 < style type ="text/css" >
6 .abc span
7 {
8 display : inline-block ; /* IE中只有块元素滤镜才有效 */
9 color : #fff ;
10 filter : glow(color=red,strength=2) ;
11 width : 50px ;
12 font-weight : bold ;
13
14 }
15 .a
16 {
17 width : 100px ;
18 }
19 </ style >
20 < script type ="text/javascript" >
21
22 var tempStrength = 1 ;
23 var idirection = 1 ;
24 var timerID = null ;
25 function MyTimer() {
26 var ss = document.styleSheets[ 0 ]; // 获得该文档的样式表，数组元素类型是CSSStyleSheet
27 // FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
28 var rules = ss.cssRules ? ss.cssRules : ss.rules;
29
30 // 某个规则不能通过这样访问rules[".a"],需要做循环拿出选择器的名称然后做比较进行筛选
31 for ( var i = 0 ; i < rules.length; i ++ ) {
32 var rule = rules[i];
33 if ( ! rule.selectorText) // css选择器的名称
34 continue ;
35
36 if (rule.selectorText.toLowerCase() == " .abc span " ) {
37 // 内嵌样式的filter属性的类型是对象
38 // tempStrength = document.getElementById("span1").filters["glow"];
39 // rule.style.color = "blue";
40
41 if (idirection == 1 ) {
42 tempStrength ++ ;
43 } else {
44 tempStrength -- ;
45 }
46 if (tempStrength == 3 && idirection == 1 ) {
47 idirection = - 1 ;
48 }
49 if (tempStrength == 2 && idirection == - 1 ) {
50 idirection = 1 ;
51 }
52 // 内联样式的filter属性的类型是String
53 rule.style.filter = " glow(color=red,strength= " + tempStrength + " ) " ;
54 timerID = setTimeout( " MyTimer() " , 1000 );
55 }
56 }
57
58 // tempStrength = document.getElementById("span1").filters["glow"].strength;
59 // if (idirection == 1) {
60 // tempStrength++;
61 // } else {
62 // tempStrength--;
63 // }
64 // if (tempStrength == 3 && idirection == 1) {
65 // idirection = -1;
66 // }
67 // if (tempStrength == 2 && idirection == -1) {
68 // idirection = 1;
69 // }
70 // document.all.span1.filters["glow"].strength = tempStrength;
71 // timerID = setTimeout("MyTimer()", 500);
72 // timerRunning = true;
73 }
74
75 </ script >
76 </ head >
77 < body onload ="MyTimer()" >
78 < ul class ="abc" >
79 < li > 1 < span id ="span1" > new </ span ></ li >
80 < li > 2 < span > new </ span ></ li >
81 < li > 3 < span > new </ span ></ li >
82 < li > 4 < span > new </ span ></ li >
83 </ ul >
84 </ body >
85 </ html >

转载于:https://www.cnblogs.com/MingDe/archive/2011/03/04/1970747.html