制作内容动态改变的层特效

1、问题：如何实现如图1和图2所示的内容动态改变的特效？当用浏览器打开示例 1所示文件时，一开始就出现如图1所示的页面效果，即显示id名为DIV2的层。 当用户使用鼠标选中“根据面积、单价计算”单选按钮时，id名为DIV2的层随 即消失，同时id名为DIV1的层显示，如图2所示；当用户选中“根据贷款总额 计算”单选按钮时，又返回到刚开始运行时的页面效果，如图1所示.用户可以 通过反复选中“根据面积、单价计算”和“根据贷款总额计算”单选按钮，来反 复地使id名为DIVI的层和id名为DIV2的层切换显示和隐藏.那么如何制作根 据选择不同的计算方式，内容动态改变的特效？图1显示id名为DIV2的层的效

2、果图2显示id名为DIV1的层的效果分析：根据前面学过的知识，有哪些方法可以实现动态改变页面内容？其实，有 两种方法。第一种方法：在上一节中学过的，通过改变DIV的innerHTML属性值动态改变页 而内容。这种情况适合动态显示的内容较少时，动态显示的内容（如“用户名” 不能为空）占据一行的时候比较适合此种方法，使用myDiv.innerHTML=HTML 代码来动态改变页面内容。第二种方法：当动态显示的内容较多，并相对固定时，则应该预先制作好DIV 内容如图1所示id名为DIVI的层中的内容有两行或两行以上内容时），然后使 用myDiv.style.display=none/block”，来

3、动态改变层的隐藏或显示，从而实 现动态改变页而内容。WANGYEXX.COM具体的制作过程如下。第一步：制作静态页而，插入一个名为myform的表单，然后在表单域中插入8 行3列表格，合并相应的单元格，如图1所示。接着插入图片和文本，并设置各 表单元素的名称。“贷款类别”下拉列表框只有两个选项：公积金和商业贷款， 值分别为g和s。在“根据面积、单价计算”和“根据贷款总额计算”文本前分 别捅入一个单选按钮。“还款期限”下拉列表框的选项为5年、10年、15年、20年、25年、30年，值分别是5、10、15、20、25、30。其他页面元素的设置 如图1所示。第二步：在如图1所示的文本“根据而积、单价

4、计算”和“根据贷款总额计算” 后分别插入两个DIV标签，并设置id名分别为DIVI和DIV2 (没有样式的DIV 层)，然后在这两个DIV层中分别放置不同计算方式显示的内容，如图3所示。图3插入两个DIV层的界面效果第三步：编写一个用于初始化id名为DIV1的层不显示的函数InitDIV()，该函 数刚来初始化时隐藏id名为DIVI的层，并且它是在页而加载时闩动调用的，代 码如下。function InitDIV()(document.getElementById(DIV1).style.display=none”; 第四步：编写函数displayDIV()，根据“计算方式”的选择，隐藏/显示

5、对应DIV 层。即若选中“根据面积、单价计算”单选按钮，就隐藏id名为DIV2的层，显 示id名为DIV1的层；同理，若选中“根据贷款总额计算”，对应DIV层的显示 /隐藏正好相反。function displayDIV()3. if (document.myform.methodRadio0.checked=true)document.getElementById(DIV1).style.display=block;显示id名为DIV1的层document.getElementById(DIV2).style.display=none” ；else(document.getElementBy

6、Id(DIV2”).style.display=block ;显示id名为DIV2的层document.getElementById(DIV1”).style.display=none” 在上述代码片断中，document.myform.methodRadio0.checked二true 表示是否 选中了第一个单选按钮。上述制作过程所对应的关键代码如示例1所示。示例1:SCRIPT language二JavaScriptfunction InitDIV() TOC o 1-5 h z (/初始化时，隐藏id名为DIV1的层document.getElementById(DIV1”).style

7、.display=none”;8.function displayDIV( )(/判断是否选中了第一个单选按钮if (document.myform.methodRadio0.checked二二true)(document.getElementById(DIV1).style.display=block ;显示id名为DIV1的层document.getElementById(DIV2”).style.display=none” ;else(document.getElementById(DIV2”).style.display=block ;显示id名为DIV2的层document.getElementById(DIV1).style.display=none” ；26.29.根据面积、单价计算 单价：INPUT