⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 淡出淡入效果-javascript实例.htm

📁 JavaScript实例
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0063)http://www.hongen.com/pc/homepage/javascript/sample/7danchu.htm -->
<HTML><HEAD><TITLE>洪恩在线 - Javascript实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK 
href="淡出淡入效果-Javascript实例.files/home.css" rel=stylesheet>
<META content=电脑乐园,电脑,乐园,交互教程,交互,教程,教育,javascript,javascript实例,网页制作 
name=keywords><LINK href="淡出淡入效果-Javascript实例.files/homepage.css" 
rel=stylesheet>
<SCRIPT language=javaScript>if(document.layers){   alert("此效果在Netscape浏览器中不能实现！");}</SCRIPT>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff onload=fade()>
<SCRIPT language=Javascript src="淡出淡入效果-Javascript实例.files/head.js"></SCRIPT>

<TABLE height=20 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR bgColor=#cfdfff>
    <TD class=p1 align=left height=20><IMG height=8 
      src="淡出淡入效果-Javascript实例.files/blank.gif" width=12><FONT 
      color=#000000><FONT color=#ff9966>当前位置</FONT>：<A class=under 
      href="http://www.hongen.com/default.htm">洪恩在线</A> -&gt; <A class=under 
      href="http://www.hongen.com/pc/index.htm">电脑乐园</A> -&gt; 
      JavaScript实例</FONT></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD vAlign=top width=207><IMG height=13 
      src="淡出淡入效果-Javascript实例.files/bule.gif" width=207></TD>
    <TD width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" width=1></TD>
    <TD align=right width=530 height=22><IMG height=20 
      src="淡出淡入效果-Javascript实例.files/js.gif" width=186></TD>
    <TD width=22><IMG height=1 
      src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" 
  width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD width=124><IMG height=1 
      src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" width=1></TD>
    <TD width=636 background=淡出淡入效果-Javascript实例.files/line.gif height=27><IMG 
      height=1 src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" 
      width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD class=p3 align=middle width=711><B>　　　　　淡 出 淡 入 效 果</B></TD>
    <TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" width=1></TD>
    <TD class=p2 width=48>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD vAlign=top align=middle>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD align=middle width=28 bgColor=#5f74bf><IMG height=49 
      src="淡出淡入效果-Javascript实例.files/bule1.gif" width=28></TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=top align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR align=middle>
          <TD>
            <TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
              <TBODY>
              <TR align=middle bgColor=#5f74bf>
                <TD class=p1 align=right><B><FONT color=#ffffff>效 果 演 
                  示</FONT></B><FONT color=#ffffff>：</FONT></TD>
                <TD class=p1 width=11><IMG height=18 
                  src="淡出淡入效果-Javascript实例.files/bule2.gif" 
              width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD>
      <SCRIPT language=JavaScript>var b = 1;var c = true;function fade(){if(document.all);if(c == true) {b++;}if(b==100) {b--;c = false}if(b==10) {b++;c = true;}if(c == false) {b--;}child.filters.alpha.opacity=0 + b;setTimeout("fade()",100);}</SCRIPT>
      <IMG style="FILTER: alpha(opacity=0)" height=233 alt=Image 
      src="淡出淡入效果-Javascript实例.files/1.jpg" width=300 name=child> </TD>
    <TD align=middle width=28 bgColor=#5f74bf>&nbsp;</TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=top align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD height=30>&nbsp;</TD></TR>
        <TR align=middle>
          <TD>
            <TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
              <TBODY>
              <TR align=middle bgColor=#5f74bf>
                <TD class=p1 align=right><B><FONT 
                  color=#ffffff>源代码如下</FONT></B><FONT color=#ffffff>：</FONT></TD>
                <TD class=p1 width=11><IMG height=18 
                  src="淡出淡入效果-Javascript实例.files/bule2.gif" 
              width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD class=p2 vAlign=top width=457><BR><BR><SPAN class=p1><FONT 
      color=#6633ff>这段程序放在&lt;body&gt;与&lt;/body&gt;之间</FONT></SPAN><BR>
      <FORM><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea rows=15 wrap=VIRTUAL cols=50>&lt;script language="JavaScript"&gt;
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
child.filters.alpha.opacity=0 + b;
setTimeout("fade()",100);
}
&lt;/script&gt;
      &lt;img src="img/1.jpg" name="child" border=0
alt="Image" style="filter:alpha(opacity=0)"&gt;</TEXTAREA></FORM><BR></TD>
    <TD align=middle width=28 bgColor=#5f74bf>&nbsp;</TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=bottom align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width=238 border=0>
        <TBODY>
        <TR align=middle>
          <TD>
            <TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
              <TBODY>
              <TR align=middle bgColor=#5f74bf>
                <TD class=p1 align=right><B><FONT 
                  color=#ffffff>源程序讲解：</FONT></B></TD>
                <TD class=p1 width=11><IMG height=18 
                  src="淡出淡入效果-Javascript实例.files/bule2.gif" 
              width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD class=p2 vAlign=top width=457>&nbsp;</TD>
    <TD align=middle width=28 bgColor=#5f74bf><IMG height=49 
      src="淡出淡入效果-Javascript实例.files/bule1.gif" width=28></TD>
    <TD align=middle width=37>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD class=p2 align=right width=693><BR>
      <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 width=522 
      borderColorLight=#000000 border=1>
        <TBODY>
        <TR>
          <TD>
            <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=6 width=650 
            borderColorLight=#003333 border=1>
              <TBODY>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#ffffff>var b = 1;<BR></TD>
                <TD class=p2 width="55%" bgColor=#ffffff>定义变量b的值为1。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#cfdfff>var c = true;</TD>
                <TD class=p2 width="55%" 
              bgColor=#cfdfff>定义变量c为布尔型变量，值为true.</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#ffffff>function fade() </TD>
                <TD class=p2 width="55%" bgColor=#ffffff>定义一个函数，名为fade.</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#cfdfff>{ 
                  if(document.all);<BR>if(c == true)<BR>{ b++; } <BR>} </TD>
                <TD class=p2 width="55%" 
                  bgColor=#cfdfff>当用户的浏览器是IE时，且C的值为真时，b的值累加，即b=b+1。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#ffffff>if(b==100)<BR>{ b--; 
                  c = false } <BR></TD>
                <TD class=p2 width="55%" 
                  bgColor=#ffffff>如果b的值为100时，其值自减，即b=b-1,即透明度下降，且c的值为假。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#cfdfff>f(b==10) { b++; c = 
                  true; }</TD>
                <TD class=p2 width="55%" 
                  bgColor=#cfdfff>如果b的值为10时，其值自加，即b=b+1，且c的值为真。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#ffffff>if(c == false) { b--; 
                  } <BR>child.filters.alpha.opacity=0 + b;<BR></TD>
                <TD class=p2 width="55%" 
                  bgColor=#ffffff>且C的值为假时，b的值自减。此时，这张图的alpha(透明度)等于“0+b”的值。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" 
                  bgColor=#cfdfff>setTimeout("fade()",100);</TD>
                <TD class=p2 width="55%" 
                  bgColor=#cfdfff>图像每100毫秒，调用一次fade函数，即透明度变化一次。可以通过调整这个数字，来控制变化的快慢。</TD></TR>
              <TR bgColor=#cfdfff>
                <TD class=p2 width="45%" bgColor=#ffffff>&lt;img src=img/1.jpg 
                  name=child style="filter:alpha(opacity=0&gt;</TD>
                <TD class=p2 width="55%" 
                  bgColor=#ffffff>插入一个文件名为“1.jpg”的图片，name=child，设置其透明度为0。</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
      <TABLE cellSpacing=0 cellPadding=0 width=640 border=0>
        <TBODY>
        <TR>
          <TD class=p1><FONT 
            color=#6633ff>注：此例效果只能在IE中出现。图片放在与文件同级的“img”文件夹中，名为1.jpg。</FONT></TD></TR></TBODY></TABLE><BR></TD>
    <TD class=p2 width=18>&nbsp;</TD>
    <TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\淡出淡入效果-Javascript实例.files\blank(1).gif" width=1></TD>
    <TD class=p2 width=48>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR bgColor=#5f74bf>
    <TD>&nbsp;</TD></TR></TBODY></TABLE>
<P>&nbsp;</P></BODY></HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -