javascript实现渐隐渐现代码
以前看别人使用纯js实现过渐变,使用opacity,虽然IE不支持,但是效果还不错。代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js渐隐渐现代码</title> </head> <body> <div id="green" style="width:100px; height:100px; background: green;"> </div> <div id="blue" style="width:100px; height:100px; background: blue; opacity: 0;"> </div> <script type="text/javascript"> alphaPlay(document.getElementById("green"), "hide", 500); setTimeout(function(){ document.getElementById("green").style.display = 'none'; alphaPlay(document.getElementById('blue'), 'show', 500); }, 500); function alphaPlay(obj, method, interval) { //method有两个值show或hiden var n = (method == "show") ? 0 : 100; var counter = 10; //每次递增10 ie = (window.ActiveXObject) ? true : false; var time = setInterval(function () { if (method == "show") { if (n < 100) { n += counter; if (ie) { obj.style.cssText = "filter:alpha(opacity=" + n + ")"; } else { (n == 100) ? obj.style.opacity = 1 : obj.style.opacity = "0." + n; } } else { clearTimeout(time); } } else { if (n > 0) { n -= counter; if (ie) { obj.style.cssText = "filter:alpha(opacity=" + n + ")"; } else { obj.style.opacity = "0." + n; } } else { clearTimeout(time); } } }, interval / counter); } </script> </body> </html>
教程链接:http://blog.zhengshuiguang.com/js/js-hide.html
随意转载~但请保留教程地址★
评论已关闭