网页设计特殊的的行为代码

### 网页设计中的特殊行为代码解析 #### 一、晃动的图片 ##### 1.1 什么是行为？ “行为”是Dreamweaver中非常具有特色的一个功能，通过预设的动作，可以让网页实现一系列复杂的动态效果。简单来说，“行为”就是一组预定义好的JavaScript代码，它们会在特定事件被触发时执行，进而实现与用户的交互。 ##### 1.2 晃动的图片实例制作 - **步骤一**：选择对象。确定要应用行为的元素，例如图片。 - **步骤二**：添加动作。根据需求选择相应的动作，如晃动图片。 - **步骤三**：调整事件。设置触发动作的事件，比如鼠标悬停时启动晃动效果。 #### 二、弹窗实例 ##### 2.1 行为面板的使用 - **打开行为面板**：快捷方式 `Shift+F4`。 - **行为面板的功能**： - **显示设置事件**：用于查看当前页面的所有事件。 - **显示所有事件**：列出所有可用的事件选项。 - **添加行为**：将新的行为添加到所选对象。 - **删除事件**：移除选定的事件。 - **移动事件顺序**：调整事件的执行顺序。 - **命令控制菜单**：提供更多的控制选项。 ##### 2.2 实例：弹出信息 - **对象**：网页正文部分。 - **事件**：`onload`，即页面加载完成后。 - **动作**：弹出一个包含信息的对话框。 ##### 2.3 实例：弹出网页窗口 - **对象**：通常是按钮或其他可点击元素。 - **事件**：点击或鼠标悬停等。 - **动作**：打开一个新的浏览器窗口。 #### 三、设置文本行为 ##### 3.1 状态栏文字 - **事件**：`onmouseover` 和 `onmouseout`。 - **动作**：改变状态栏的文字显示。 ##### 3.2 设置文本域文字 - **事件**：`onfocus`, `onblur`, `onclick` 等。 - **动作**：改变文本域的内容。 #### 四、交换图片 - **事件**：`onmouseover`, `onmouseout`。 - **动作**：替换图片。 - **用途**：通常用于广告条或产品展示。 #### 五、拖动AP元素 - **实例**：拼图游戏。 - **参数**： - **背景层**：`height: 220px; width: 220px; background-color: #F9EEF2; border: 1px solid #009900;` - **图片层**：`width:110px; height:110px;` #### 六、修改属性行为 - **事件**：触发修改属性的事件。 - **动作**：修改指定对象的属性值。 - **注意事项**：每个对象需要有一个唯一的ID。 #### 七、动态菜单 - **实例**：创建响应式的下拉菜单。 - **事件**：鼠标悬停或点击。 - **动作**：展开或折叠菜单项。 #### 八、效果行为的应用 - **示例**：滑动面板、淡入淡出等视觉效果。 - **事件**：页面加载、鼠标悬停等。 - **动作**：改变元素的透明度、位置等属性。 #### 九、特效脚本代码的使用 ##### 9.1 跑马灯文字效果 - **实例**：自动滚动的新闻或公告。 - **实现方法**：利用JavaScript定时器来更新元素的文本位置。 ##### 9.2 鼠标特效的使用 - **实例**：跟随鼠标移动的光标效果。 - **实现方法**：监听鼠标位置，并更新CSS样式。 ##### 9.3 图片展播 - **样式 1 代码**： ```javascript var widths = 282; var heights = 164; var counts = 4; img1 = new Image(); img1.src = 'sx/1.jpg'; //...其他图片初始化... function change_img() { if (key == 0) { key = 1; } else if (document.all) { document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration=2); } eval('document.getElementById("pic").src = img' + nn + '.src'); eval('document.getElementById("url").href = url' + nn + '.src'); for (var i = 1; i <= counts; i++) { document.getElementById("xx").style.backgroundColor = "#FFF"; //...其他样式设置... } } ``` - **解释**： - **变量定义**：定义图片宽度、高度及数量。 - **图片初始化**：加载图片资源。 - **函数实现**：通过循环改变图片源，实现图片轮播效果。 Dreamweaver中的行为功能非常强大，能够帮助开发者轻松地为网站添加各种动态效果。无论是简单的鼠标事件处理，还是复杂的动态菜单和图片展播，都能够通过行为面板中的事件和动作组合来实现。通过合理地使用这些行为，可以极大地提升网站的用户体验和视觉吸引力。