DHTML特性 ●执行效率高 ●实现交互功能 ●可下载字体 元素自由定位 ●数据感知、捆绑和动态表单 网页设计与制作
网页设计与制作 6 DHTML特性 ⚫ 执行效率高 ⚫ 实现交互功能 ⚫ 可下载字体 ⚫ 元素自由定位 ⚫ 数据感知、捆绑和动态表单
DHTML实例 <html <head> < title> dhTml示例<tle <script language="JavaScript ns=( document layers)? true: false ie=( documentall)? true: flase function init() f if (ns) block= document. blockDiv if (ie) block=blockDiv style blockxpos=parseInt( block left) block ypos=parseInt( block. top 网页设计与制作
网页设计与制作 7 DHTML实例 <html> <head> <title>DHTML 示例</title> <script language="JavaScript"> <!-- ns = ( document.layers ) ? true : false ie = ( document.all ) ? true : flase function init( ) { if (ns) block = document.blockDiv if (ie) block = blockDiv.style block.xpos = parseInt( block.left ) block.ypos = parseInt( block.top ) }
function slide() f if blockxpos<500) i block xpos - block xpos t 3 block left= block xpos setTimeout("slide(), 30))) function moveTo( obj,x, y) i obj. xpos =X obj. left=obj. xpos obj. ypos =y obj. top =obj ypos j / </script> <hhead> 网页设计与制作
网页设计与制作 8 function slide( ) { if ( block.xpos<500 ) { block.xpos = block.xpos + 3 block.left = block.xpos setTimeout( "slide( )", 30 ) } } function moveTo( obj, x, y ) { obj.xpos = x obj.left = obj.xpos obj.ypos = y obj.top = obj.ypos } //--> </script> </head>
<body bgcolor =#00FFFF on Load <center> < font color= red face="宋体 sIze =5 <b> DHTML示例</b></font> <hr noshade [< a href=" javascript:side()">单击此处图片开始 滑动</a> <a href ="javascript: move To( block, 50, 80)>Eii 此处图片回复原位<a>] </center> <div id="block Div"style="position absolute left: 50; top: 80; <img src="tu ku mouse jpg"border=1> </div </body> </htm 网页设计与制作
网页设计与制作 9 <body bgcolor = "#00FFFF" onLoad = "init( )"> <center> <font color = red face = "宋体" size = 5> <b>DHTML示例</b> </font> <hr noshade> [<a href = "javascript:slide( )">单击此处图片开始 滑动</a>] [<a href = "javascript:moveTo( block, 50, 80)">单击 此处图片回复原位</a>] </center> <div ID = "blockDiv" style = "position:absolute; left:50; top:80;"> <img src = "..\tu ku\mouse.jpg" border = 1> </div> </body> </html>
D示例-■ microsoft Internet Explorer 口区 文件)编辑)查看收藏(A)工具()帮助 地址)]: Axn\fwbook7 zhangxia2htm 了上网助手⑦ DHTM示例 单击此处图片于崎滑动]单击此处图片回复原位 el javascript: slide O 「「圓我的电脑 网页设计与制作
网页设计与制作 10