Javascript实现div层渐隐效果的方法_javascript技巧

本文实例讲述了Javascript实现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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Alpha</title>
<style type="text/css">
  #show {
    background:#ffff66;
    font-size:12px;
    height:200px;
    width:300px;
    left:300px;
    position:absolute;
    text-align:center;
    filter:alpha(opacity=0);
  }
</style>
</head>
<body onload={document.getElementById('show').style.opacity=0;}>
<div id="show"></div>
<button onclick=fun()>button</button>
</body>
<script>
function fun(){
  var div=document.getElementById('show');
   div.style.opacity=1;
   hidden(document.getElementById("show"),1,-0.01);
}
function hidden(o,i,s){
  t=setInterval(function(){
  i+=s;
  o.style.opacity=i;
  if(i<0)window.clearInterval(t);
  },1);
};
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, div
渐隐效果
jquery渐显渐隐div、div渐隐、javascript div、javascript 隐藏div、javascript 创建div,以便于您获取更多的相关知识。

时间: 2024-12-01 16:19:53

Javascript实现div层渐隐效果的方法_javascript技巧的相关文章

Javascript实现div层渐隐效果的方法

  本文实例讲述了Javascript实现div层渐隐效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

JavaScript实现鼠标点击后层展开效果的方法_javascript技巧

本文实例讲述了JavaScript实现鼠标点击后层展开效果的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码可实现鼠标点击后层展开的功能,代码稍嫌复杂,重在学习研究,有兴趣的可以修改简化一下. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>层展开折叠</tit

javascript实现点击按钮让DIV层弹性移动的方法_javascript技巧

本文实例讲述了javascript实现点击按钮让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/

js控制div层的叠加简单方法_javascript技巧

如下所示: <style type="text/css"> .favorite_icon{float:left; padding: 0 0 0 30px;} .favorite_label{float:left; width:950px;} .favorite_label h2{ border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;} .favorite_title{height:60px;margi

纯js模拟div层弹性运动的方法_javascript技巧

本文实例讲述了纯js模拟div层弹性运动的方法.分享给大家供大家参考.具体如下: 特性: 1. 支持各项常数自定义 2. 理论支持所有元素,只需修改style.width,你懂得 3. 已知支持浏览器:chrome/firefox/IE7.8.9 <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script type="te

javascript实现网页背景烟花效果的方法_javascript技巧

本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!

JS实现定时自动关闭DIV层提示框的方法_javascript技巧

本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

javascript简单实现滑动菜单效果的方法_javascript技巧

本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

Javascript实现div的toggle效果实例分析_javascript技巧

本文实例讲述了Javascript实现div的toggle效果.分享给大家供大家参考.具体分析如下: <script type="text/javascript" language="javascript"> function $(obj) { return document.getElementById(obj); } function ToggleDiv() { this.ToggleId='silder'; //被伸缩的对象ID this.Pare