教程集 www.jiaochengji.com
首页
|
golang教程
|
脚本编程
|
数据库
|
服务器技术
|
操作系统
|
建站教程
Golang 教程
教程集
>
脚本编程
>
javascript
> 正文 DIV层的淡入淡出效果
DIV层的淡入淡出效果
发布时间：2023-06-08 编辑：jiaochengji.com
教程集为您提供DIV层的淡入淡出效果等资源，欢迎您收藏本站，我们将为您提供最新的DIV层的淡入淡出效果资源
提示：您可以先修改部分代码再运行
<!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" xml:lang="zh" lang="zh" dir="ltr"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <title>淡入淡出...</title> <style type="text/css"> div{width:250px;height:250px;} div#main{position:relative;border:1px solid red;} div#a{position:absolute;top:0;left:0;background-color:#ccc;color:red;opacity:1;filter:alpha(opacity=100);z-index:1;} div#b{position:absolute;top:0;left:0;background-color:#ccc;color:blue;opacity:0;filter:alpha(opacity=0);z-index:0;} </style> <script type="text/javascript"> var timer = null; var ele_a = ele_b = null; function $(id){return document.getElementById(id);} function fade(a,b) { ele_a = $(a); ele_b = $(b); if(!ele_a || !ele_b){return;} if(document.all) { ele_a.filters.alpha.opacity = 100; ele_b.filters.alpha.opacity = 0; }else{ ele_a.style.opacity = 1; ele_b.style.opacity = 0; } ele_a.style.zIndex = 1; ele_b.style.zIndex = 0; fade_opacity(); } function fade_opacity() { var ifstop = false; if(document.all) { if(ele_a.filters.alpha.opacity > 0) { ele_a.filters.alpha.opacity -= 10; }else if(ele_b.filters.alpha.opacity < 100) { ele_b.filters.alpha.opacity = 10; }else{ ifstop = true; } } else { if(ele_a.style.opacity > 0) { ele_a.style.opacity -= 0.1; }else if(ele_b.style.opacity < 1){ ele_b.style.opacity = parseFloat(ele_b.style.opacity) 0.1; }else{ ifstop = true; } } if(ifstop==true) { window.clearTimeout(timer); ele_b.style.zIndex = parseInt(ele_a.style.zIndex) 1; }else{ timer = window.setTimeout('fade_opacity()', 100); } } </script> </head> <body> <div id="main"> <div id="a">this is div-a<input type="text" size="20" /></div> <div id="b">this is div-b<textarea>
