行为代码解析.doc

一、晃动的图片1）什么是行为？“行为” 可以说是Dreamweaver中最具特色的功能之一，它提供了很多实用的动作，每个动作可以完成特定的任务，为网页添加不少特殊效果。2）实例制作：晃动的图片技巧：添加行为的时候一般遵循3个步骤： n 选择对象。n 添加动作。n 调整事件。 对象是指接受事件的主体1. 事件 n 事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。常用的事件：鼠标的移动或者点击时，键盘的输入和控制等等。2. 动作 n 动作其实是一段网页上的JavaScript代码，这些代码在特定事件被激发时执行，从而实现访问者与Web页进行交互，以多种方式更改页面或执行某些任务。行为是动作和触发该动作的事件的结合体注意使用动作的对象必须要有个ID二、弹窗实例1行为面板的使用1) 打开行为面板（快捷方式：Shift+F4）2) 认识行为面板显示设置事件 显示所有事件 添加行为 删除事件 移动事件顺序 命令控制菜单 2实例： 弹出信息刚刚的实例，对象是：网页正文部分；事件是：onload 页面打开；动作是弹出信息框。常见事件： OnMouseOver 鼠标经过 OnMouseout 鼠标离开 OnLoad 打开 OnUnload 关闭 3 实例：弹出网页窗口三、设置文本行为1 ) 状态栏文字2）设置文本域文字（注意使用动作的对象必须要有个ID）事件解读： onFocus 事件在对象获得焦点时发生onBlur 事件会在对象失去焦点时发生onClick 事件会发生在点击时onDblclick 事件会发生在双击时onmouseDown 事件会在鼠标按键被按下时发生onmouseUp 事件会在鼠标按键被松开时发生onmouseOver 事件会在鼠标指针移动到指定的对象上时发生onmouseOut 事件会在鼠标指针离开到指定的对象上时发生onmouseMove 事件会在鼠标指针移动时发生onkeyDown 事件会在用户按下一个键盘按键时发生onkeyPress 事件会在键盘按键被按下并释放一个键时发生onkeyUp键盘按键被松开时发生四、交换图片实例该行为可以实现图片的转换，常用来做广告条或产品展示。五、拖动AP元素实例：拼图游戏背景层参数height: 220px;width: 220px;background-color: #F9EEF2;border: 1px solid #009900;图片层width:110px;height:110px;六、修改属性行为一种比较灵活的行为，可以通过事件来触发某个对象属性值的变化。注意：每个被修改属性的对象必须设置唯一的ID。七、动态菜单实例八、效果行为的应用九、特效脚本代码的使用实例1：跑马灯文字效果实例2：鼠标特效的使用实例3：图片展播1）样式1代码var widths=282; /图片宽var heights=164;/高var counts=4;/图片数量img1=new Image ();img1.src=sx/1.jpg; /图片的位置img2=new Image ();img2.src=sx/2.jpg;img3=new Image ();img3.src=sx/3.jpg;img4=new Image ();img4.src=sx/4.jpg;url1=new Image ();url1.src=;/图片链接地址url2=new Image ();url2.src=;url3=new Image ();url3.src=;url4=new Image ();url4.src=;var nn=1;var key=0;function change_img()if(key=0)key=1;else if(document.all)document.getElementById(pic).filters0.Apply();document.getElementById(pic).filters0.Play(duration=2);eval(document.getElementById(pic).src=img+nn+.src);eval(document.getElementById(url).href=url+nn+.src);for (var i=1;icounts)nn=1;tt=setTimeout(change_img(),4000); /图片过渡时间长度function changeimg(n)nn=n;window.clearInterval(tt);change_img();document.write();document.write(.axxpadding:1px 7px;border-left:#cccccc 1px solid;);document.write(a.axx:link,a.axx:visitedtext-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;);document.write(a.axx:active,a.axx:hovertext-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;);document.write(.bxxpadding:1px 7px;border-left:#cccccc 1px solid;);document.write(a.bxx:link,a.bxx:visitedtext-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;);document.write(a.bxx:active,a.bxx:hovertext-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;);document.write();document.write();document.write();document.write();for(var i=1;icounts+1;i+)document.write(+i+);document.write();change_img();1） 样式2代码以下代码放入之间/* Reset style */* margin:0; padding:0; word-break:break-all; body background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; h1, h2, h3, h4, h5, h6 font-size:1em; a color:#0287CA; text-decoration:none; a:hover text-decoration:underline; ul, li list-style:none; fieldset, img border:none; legend display:none; em, strong, cite, th font-style:normal; font-weight:normal; input, textarea, select, button font:12px Helvetica, Arial, sans-serif; table border-collapse:collapse; html overflow:-moz-scrollbars-vertical; /*Always show Firefox scrollbar*/* iFocus style */#ifocus width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; #ifocus_pic display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; #ifocus_piclist position:absolute; #ifocus_piclist li width:410px; height:225px; overflow:hidden; #ifocus_piclist img width:410px; height:225px; #ifocus_btn display:inline; float:right; width:91px; margin:9px 9px 0 0; #ifocus_btn li width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); #ifocus_btn img width:75px; height:45px; margin:7px 0 0 11px; #ifocus_btn .current background: url(/by yourself) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); #ifocus_opdiv position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); #ifocus_tx position:absolute; left:8px; bottom:8px; color:#FFF; #ifocus_tx .normal display:none; function $(id) return document.getElementById(id); function addLoadEvent(func) var oldonload = window.onload; if (typeof window.onload != function) window.onload = func; else window.onload = function() oldonload(); func(); function moveElement(elementID,final_x,final_y,interval) if (!document.getElementById) return false; if (!document.getElementById(elementID) return false; var elem = document.getElementById(elementID); if (elem.movement) clearTimeout(elem.movement); if (!elem.style.left) elem.style.left = 0px; if (!elem.style.top) elem.style.top = 0px; var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos = final_x & ypos = final_y) return true; if (xpos final_x) var dist = Math.ceil(xpos - final_x)/10); xpos = xpos - dist; if (ypos final_y) var dist = Math.ceil(ypos - final_y)/10); ypos = ypos - dist; elem.style.left = xpos + px; elem.style.top = ypos + px; var repeat = moveElement(+elementID+,+final_x+,+final_y+,+interval+); elem.movement = setTimeout(repeat,interval);function classNormal(iFocusBtnID,iFocusTxID) var iFocusBtns= $(iFocusBtnID).getElementsByTagName(li); var iFocusTxs = $(iFocusTxID).getElementsByTagName(li); for(var i=0; i=2) iFocusBtns1.onmouseover = function() moveElement(ifocus_piclist,0,-225,5); classNormal(ifocus_btn,ifocus_tx); classCurrent(ifocus_btn,ifocus_tx,1); if (listLength=3) iFocusBtns2.onmouseover = function() moveElement(ifocus_piclist,0,-450,5); classNormal(ifocus_btn,ifocus_tx); classCurrent(ifocus_btn,ifocus_tx,2); if (listLength=4) iFocusBtns3.onmouseover = function() moveElement(ifocus_piclist,0,-675,5); classNormal(ifocus_btn,ifocus_tx); classCurrent(ifocus_btn,ifocus_tx,3); setInterval(autoiFocus(),5000);var atuokey = false;function autoiFocus() if(!$(ifocus) return false; if(atuokey) return false; var focusBtnList = $(ifocus_btn).getElementsByTagName(li); var listLength = focusBtnList.length; for(var i=0; ilistLength; i+) if (focusBtnListi.className = current) var currentNum = i; if (currentNum=0&listLength!=1 ) moveElement(ifocus_piclist,0,-225,5); classNormal(ifocus_btn,ifocus_tx); classCurrent(ifocus_btn,ifocus_tx,1); if (currentNum=1&listLength!=2 ) moveElement(ifocus_piclist,0,-450,5); classNormal(ifocus_btn,ifocus_tx); classCurrent(ifocus_btn,ifocus_tx,2); if (currentNum=2&listLe