首页 > Javascript > javascript实现渐隐渐现代码

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

随意转载~但请保留教程地址★

标签：渐变

评论已关闭