Xen*_*eno 0 html javascript dom
我开始通过使用绝对定位和通过Javascript改变它们的不透明度在3个元素之间进行简单的淡入淡出过渡,但是下面的代码不能像我预期的那样工作,我不确定为什么.
<html>
<head>
<style>
#item0, #item1, #item2 {
opacity: 0.0;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
vertical-align: middle;
font-size: 26px;
}
#item0 { opacity: 1.0; }
</style>
<script>
var count = 0;
var items;
function init(){
items = document.getElementById("container").getElementsByTagName("div");
setInterval(fade, 5000);
}
function fade(){
fadeElements(items[count], items[(count + 1) % 3]);
count = (count + 1) % 3;
}
function fadeElements(prevItem, nextItem){
prevItem.style.opacity -= 0.1;
nextItem.style.opacity += 0.1;
if(nextItem.style.opacity < 1.0){
setTimeout(function(){fadeElements(prevItem, nextItem)}, 50);
} else {
nextItem.style.opacity = 1.0;
prevItem.style.opacity = 0.0;
}
}
</script>
</head>
<body onload="init();">
<div id="container">
<div id="item0"> 0 </div>
<div id="item1"> 1 </div>
<div id="item2"> 2 </div>
</div>
</body>
</html>
我认为这与使用+ = with element.style.opacity有关,但是Firefox给了我无用的错误,Chrome根本就没有错误.
element.style对象的成员是字符串.所以试试吧
prevItem.style.opacity = parseFloat(prevItem.style.opacity) - 0.1;
nextItem.style.opacity = parseFloat(nextItem.style.opacity) + 0.1;
| 归档时间： |
|
| 查看次数： |
593 次 |
| 最近记录： |