logo淡出代码资源-CSDN文库

需积分: 16 148 浏览量 2014-06-28 17:45:46 上传评论收藏 3KB TXT 举报

根据提供的信息，我们可以了解到这是一段用于实现网页Logo淡入淡出效果的代码。下面将对这段代码进行详细的解析，并从中提取出相关的知识点。 ### 一、代码整体概述这段代码主要通过JavaScript来实现一个Logo图片在网页上的淡入淡出效果。其核心功能包括： - 判断浏览器类型（是否支持`document.layers`或`document.all`）。 - 设置Logo的显示位置及样式。 - 实现Logo的淡入效果。 - 设置Logo显示一段时间后的隐藏效果。 ### 二、关键代码解析 #### 1. 基础设置 ```html <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>页面上的Logo图片</title> </head> ``` - **Content-Type**: 设置文档的字符集为GB2312，适用于中文环境。 - **Title**: 定义了网页的标题。 #### 2. JavaScript 主逻辑 ```javascript <SCRIPT language=JavaScript> if (document.images) { var staticlogo = new Image(88, 31); staticlogo.src = "/images/logo.gif"; var logolink = "/"; var alttext = "网站－"; var fadeintoview = 1; var visibleduration = 12; // ...后续代码 } ``` - **Image 对象**: 创建一个新的图像对象，用于加载Logo图片。 - **logolink**: 设置点击Logo时跳转的链接。 - **alttext**: 图片无法显示时的替代文本。 - **fadeintoview**: 控制是否启用淡入效果。 - **visibleduration**: Logo完全可见的时间（秒）。 #### 3. 淡入效果实现 ```javascript function bringintoview() { if (logo.filters.alpha.opacity <= 95) { logo.filters.alpha.opacity += 5; } else { clearInterval(viewit); if (visibleduration != 0) { setTimeout("logo.style.visibility='hidden'", visibleduration * 1000); } } } ``` - **filters.alpha.opacity**: IE浏览器特有的属性，用于控制元素的透明度。 - **bringintoview()**: 淡入动画的核心函数，逐步增加Logo的透明度直到完全显示。 - **setInterval**: 定时调用`bringintoview()`函数，实现连续渐变效果。 #### 4. 浏览器兼容性处理 - **document.layers**: Netscape 4.x 浏览器的特性，用于创建层。 - **document.all**: IE 浏览器特有的API，提供了对所有元素的访问。 #### 5. 其他细节 - **setTimeout** 和 **setInterval** 的使用：分别用于延迟执行函数和定时重复执行函数。 - **window.onscroll** 和 **window.onresize** 的绑定：用于监听滚动和窗口大小变化事件。 - **插入Logo**：通过修改`logo`元素的`innerHTML`属性来插入Logo图片。 ### 三、技术要点总结 1. **浏览器兼容性**: 该代码通过检测浏览器类型来选择不同的实现方式，以确保在不同浏览器上都能正常运行。 2. **DOM 操作**: 使用JavaScript操作DOM元素，如创建新元素、修改元素属性等。 3. **事件监听**: 利用`window.onscroll`和`window.onresize`等事件处理函数来响应用户操作。 4. **定时器**: `setTimeout`和`setInterval`的使用让动态效果更加流畅自然。 5. **透明度控制**: 在IE浏览器下利用`filters.alpha.opacity`属性控制透明度。这段代码不仅展示了如何实现Logo淡入淡出的效果，还涉及到了多种前端开发的基本技巧和技术要点，对于学习前端开发具有一定的参考价值。

资源推荐

资源详情

资源评论

先做一个88*31的LOGO，当然大一点也无所谓，只要和你的网页相匹配就行了，然后设置LOGO的路径和链接，还能给Logo自定义一个ALT属性。设置代码里的var fadeintoview=1，属性为1或者0(1是IE特有的，使LOGO隐现），最后设置LOGO显示的时间，例如12 秒，数值为0表示一直显示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页左上角的LoGo图片</title>
</head>
<body>
<SCRIPT language=JavaScript>
if (document.images)
var staticlogo=new Image(88,31)
staticlogo.src="/images/logo.gif"
var logolink="/"
var alttext="网站标志"
var fadeintoview=1
var visibleduration=12
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
var fadeset=''
if (fadeintoview)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论收藏

内容反馈