先看看效果:
由于本网站的CSS与此演示效果有点冲突,演示效果有点不佳,但你可以自己运行一遍。查看本页面源代码即可获取这个效果的实现代码,下面只给出 javascript code。
var n = 0; var obj = document.getElementById("show_text"); var fc = document.getElementById("fc"); function Mea(v) { n = v; setBg(v); plays(v); } function setBg(v) { for (var i = 0; i < 4; i++) { if (v == i) { obj.getElementsByTagName("li")[i].className = "act"; if (v == 3) { obj.getElementsByTagName("li")[3].style.marginTop = "-2px"; } else { var p = obj.getElementsByTagName("li")[3].style.marginTop; if (p == "-2px") { obj.getElementsByTagName("li")[3].style.marginTop = "0px"; } } } else { obj.getElementsByTagName("li")[i].className = ""; } } } function plays(v) { try { with (fc) { filters[0].Apply(); for (var i = 0; i < 4; i++) { (i == v) ? children[i].style.display = "block" : children[i].style.display = "none"; } filters[0].play(); } } catch (e) { var d = document.getElementById("fc").getElementsByTagName("div"); for (var j = 0; j < 4; j++) { (j == v) ? d[j].style.display = "block" : d[j].style.display = "none"; } } } function clearAuto() { clearInterval(autoStart); } function setAuto() { autoStart = setInterval("auto()", 2000); } function auto() { n++; if (n >= 4) n = 0; Mea(n); } setAuto();
本文地址:http://www.nowamagic.net/librarys/veda/detail/648,欢迎访问原出处。
大家都在看