Javascript特效代码实现网页交互功能

"这篇文章主要介绍了网页设计中常用的Javascript特效代码，包括字体缩放、下拉菜单、收藏网页、设为首页、全屏显示以及背景音乐播放等实用功能的实现方法。" 在网页设计中，Javascript作为一种强大的客户端脚本语言，常常用于实现各种交互式效果。以下是一些常见的Javascript特效代码： 1. 字体缩放： 通过`<script>`标签定义一个名为`doZoom`的函数，该函数接收一个参数`size`，用于改变指定ID为`zoom`的元素（例如文字）的字体大小。在HTML中，可以创建多个链接，分别调用`doZoom`函数来改变字体大小。这样，用户可以通过点击这些链接来调整页面的文字大小，提升可读性。 ```html <script type="text/javascript"> function doZoom(size) { document.getElementById('zoom').style.fontSize = size + 'px'; } </script> <span id="zoom">需要缩放的文本</span> <a href="javascript:doZoom(16)">增大</a> <a href="javascript:doZoom(14)">减小</a> <a href="javascript:doZoom(12)">最小</a> ``` 2. 下拉菜单： 可以通过`<select>`和`<option>`标签创建下拉菜单，当用户选择不同的选项时，可以使用`onchange`事件打开对应链接的新窗口。这在提供多种链接选择时非常有用。 ```html <select name="select" onchange="window.open(this.options[this.selectedIndex].value)"> <option value="http://www.microsoft.com/ie">Internet Explorer</option> <option value="http://www.microsoft.com">Microsoft Home</option> <option value="http://msdn.microsoft.com">Developer Network</option> </select> ``` 3. 收藏网页： 使用`window.external.addFavorite`方法，用户可以将当前网页添加到浏览器的收藏夹中。这个功能对于希望用户保存和回访网站的网页设计师来说非常有用。 ```html <a href="javascript:window.external.addFavorite('http://','描述')">收藏网页</a> ``` 4. 设为首页： 通过`onclick`事件和`this.style.behavior`，可以创建一个链接，使得用户点击后将当前页面设为浏览器的首页。 ```html <a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://');">设为首页</a> ``` 5. 全屏显示： 利用`self.moveTo`和`self.resizeTo`两个方法，可以实现网页的全屏显示。这种方法可以让用户更好地专注于网页内容。 ```javascript <!--Begin self.moveTo(0,0) // 移动到屏幕左上角 self.resizeTo(screen.availWidth, screen.availHeight) // 设置窗口大小为可用屏幕大小 //End--> ``` 6. 背景音乐播放： 对于支持的浏览器，如IE，可以使用`<bgsound>`标签或`<embed>`标签来添加背景音乐。`loop`属性设置为"-1"表示循环播放。 ```html <bgsound src="mid/windblue[1].mid" loop="-1">仅限IE <embed src="music.mid" autostart="true" loop="-1"> ``` 以上代码示例展示了Javascript在网页设计中的实用性，通过它们可以创建更动态、交互性强的用户体验。然而，需要注意的是，随着Web技术的发展，一些旧的特性如`<bgsound>`已经不再推荐使用，开发者应关注现代Web标准和最佳实践，如使用`<audio>`标签处理音频，并确保对不同浏览器的良好兼容性。