制作内容动态改变的层特效-易势科技

design网站设计

design frontier设计前沿当前位置：首页>主要服务>网站设计>设计前沿

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

第一种方法：通过改变DIV的innerHTML属性值动态改变页面内容。这种情况适合动态显示的内容较少时，动态显示的内容（如“用户名”不能为空）占据一行的时候比较适合此种方法，使用myDiv.innerHTML="HTML代码"来动态改变页面内容。

第二种方法：当动态显示的内容较多，并相对固定时，则应该预先制作好DIV内容，然后使用myDiv.style.display="none/block",来动态改变层的隐藏或显示，从而实现动态改变页面内容。经过上面的详细分析，这里应该采用第二种方法，先设计好层中的内容，然后使用none/block 属性值来显示或隐藏层，从而实现动态改变页面内容。

具体的制作过程如下：

第一步：制作静态页面，插入一个名为myform的表单，然后在表单域中插入8行3列表格，合并相应的单元格，接着插入图片和文本，并设置各表单元素的名称。“贷款类别”下拉列表框只用两个选项：公积金和商业贷款，值分别为g和s。在“根据面积、单价计算”和“根据贷款总额计算”文本前分别插入一个单选按钮。“还款期限”下拉列表框的选项为5年、10年、15年、20年、30年，值分别是5、10、15、20、30。其他页面元素的设置。

第二步：“根据面积、单价计算”和“根据贷款总额计算”后分别插入两个DIV标签，并设置id名分别为DIV1和DIV2（没有样式的DIV层），然后在这两个DIV层中分别放置不同计算方式显示的内容。

第三步“编写一个用于初始化id名为DIV1的层不显示的函数INitDIV(),该函数用来初始化时隐藏id名为DIV1的层，并且他是在页面加载时自动调用的。

上一条资讯|返回栏目页|下一条资讯

分享到： QQ空间新浪微博腾讯微博人人网百度空间

这篇文章不错