您的位置：首页 > Web前端 > JavaScript

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

2011-03-04 11:45 246 查看

<!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>
<title>用JavaScript操作CSS滤镜实现最近新闻旁边的“new”</title>
<style type="text/css">
.abc span
{
display: inline-block; /*IE中只有块元素滤镜才有效*/
color: #fff;
filter: glow(color=red,strength=2);
width: 50px;
font-weight:bold;

}
.a
{
width: 100px;
}
</style>
<script type="text/javascript">

var tempStrength = 1;
var idirection = 1;
var timerID = null;
function MyTimer() {
var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet
//FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
var rules = ss.cssRules ? ss.cssRules : ss.rules;

//某个规则不能通过这样访问rules[".a"],需要做循环拿出选择器的名称然后做比较进行筛选
for (var i = 0; i < rules.length; i++) {
var rule = rules[i];
if (!rule.selectorText)//css选择器的名称
continue;

if (rule.selectorText.toLowerCase() == ".abc span") {
//内嵌样式的filter属性的类型是对象
//tempStrength = document.getElementById("span1").filters["glow"];
//rule.style.color = "blue";

if (idirection == 1) {
tempStrength++;
} else {
tempStrength--;
}
if (tempStrength == 3 && idirection == 1) {
idirection = -1;
}
if (tempStrength == 2 && idirection == -1) {
idirection = 1;
}
//内联样式的filter属性的类型是String
rule.style.filter = "glow(color=red,strength=" + tempStrength + ")";
timerID = setTimeout("MyTimer()", 1000);
}
}

//            tempStrength = document.getElementById("span1").filters["glow"].strength;
//            if (idirection == 1) {
//                tempStrength++;
//            } else {
//                tempStrength--;
//            }
//            if (tempStrength == 3 && idirection == 1) {
//                idirection = -1;
//            }
//            if (tempStrength == 2 && idirection == -1) {
//                idirection = 1;
//            }
//            document.all.span1.filters["glow"].strength = tempStrength;
//            timerID = setTimeout("MyTimer()", 500);
//            timerRunning = true;
}

</script>
</head>
<body onload="MyTimer()">
<ul class="abc">
<li>1<span id="span1">new</span></li>
<li>2<span>new</span></li>
<li>3<span>new</span></li>
<li>4<span>new</span></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航