网页设计特效代码Dreamweaver资源-CSDN文库

5星 · 超过95%的资源需积分: 10 139 浏览量 2011-03-06 18:39:46 上传评论收藏 39KB TXT 举报

根据提供的文件信息，我们可以归纳出以下几个关键的知识点： ### 知识点一：网页特效代码在Dreamweaver中的应用 #### 1.1 图片的渐显播放在网页设计中，图片渐显效果通常用来增加用户体验，使页面更加生动。这种效果可以通过JavaScript来实现。例如，可以使用定时器（`setTimeout`）结合CSS的透明度属性（`opacity`）来控制图片的逐渐显示。在Dreamweaver中，用户可以直接插入JavaScript代码或使用内置的行为面板添加这样的特效。 #### 1.2 缓慢打开的下拉菜单下拉菜单是网页导航中常见的一种形式，通过JavaScript可以实现菜单项缓慢展开的效果。这可以通过监听鼠标事件（如`onmouseover`和`onmouseout`），并利用CSS的动画属性（如`transition`）或JavaScript来动态改变元素的高度来实现。Dreamweaver提供了行为面板，可以方便地添加这些交互效果。 #### 1.3 滚动效果滚动效果是指当用户滚动页面时，某些元素能够随着滚动而移动或变化。这种效果可以通过监听滚动事件（`onscroll`）并在事件处理函数中调整元素的位置或样式来实现。Dreamweaver中可以插入自定义的JavaScript代码来达到这一目的。 #### 1.4 图片集旋转显示图片轮播或者说是图片集旋转显示是现代网页设计中常见的一个功能。通过使用JavaScript库（如jQuery等）或纯JavaScript来控制图片的自动切换，可以在不刷新页面的情况下展示多张图片。在Dreamweaver中，可以使用行为面板中的“循环”或“延时”等选项来实现图片轮播效果。 ### 知识点二：Dreamweaver中的JavaScript应用实例 #### 2.1 使用JavaScript打开新窗口在Dreamweaver中插入JavaScript代码可以实现各种交互效果。例如，下面这段代码演示了如何使用JavaScript在特定位置打开一个新的浏览器窗口： ```javascript <script language="JavaScript"> window.open("window.htm","toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,width=468,height=70,left=200,top=50"); </script> ``` 这里使用了`window.open()`方法来指定新窗口的各种参数，包括窗口大小、位置等。 #### 2.2 添加收藏夹功能下面这段代码展示了如何使用JavaScript实现添加收藏夹的功能： ```html <span style="CURSOR:hand" onClick="window.external.addFavorite('http://www.dabaoku.com','ҳ󱦿')" title="ҳ󱦿">ղرվ</span> ``` 这里通过设置`onClick`事件触发`addFavorite`方法来实现添加收藏夹的操作。需要注意的是，这个功能可能受到浏览器安全限制的影响。 #### 2.3 自定义光标效果此外，还可以通过JavaScript来实现自定义光标效果，增加网站的趣味性。例如，下面这段代码展示了一个简单的光标追踪特效： ```html <head> <style type="text/css"> BODY{overflow:scroll;overflow-x:hidden;} </style> <SCRIPT LANGUAGE="JavaScript1.2"> //... </SCRIPT> </head> ``` 在这个示例中，通过监听鼠标移动事件（`onmousemove`）并使用`setTimeout`来不断更新自定义光标的坐标，从而实现了光标跟踪的效果。以上这些知识点不仅涵盖了网页设计中的常用特效代码的应用，还具体展示了在Dreamweaver环境中如何使用JavaScript来实现这些功能。通过掌握这些技巧，可以显著提高网页的交互性和用户体验。

资源推荐

资源评论