JavaScript实现LOGO淡入效果代码

需积分: 16 117 浏览量更新于2024-09-10 收藏 3KB TXT 举报

"这是一个关于HTML和JavaScript实现的logo淡入淡出效果的代码示例。" 在网页设计中，动态效果可以提升用户体验，增加网站的吸引力。这个代码片段就是用来实现一个logo图片淡入淡出的效果。它利用了HTML的基础结构和JavaScript的动态功能来创建这种视觉效果。首先，我们看到`<html>`、`<head>`和`<body>`等基本HTML标签，它们定义了网页的整体结构。`<meta>`标签用于设置页面的字符编码，这里是`gb2312`，确保中文字符能够正确显示。`<title>`标签设置了网页的标题。接着，我们进入JavaScript部分。这段代码首先定义了一些变量，如`staticlogo`、`logolink`、`alttext`、`fadeintoview`和`visibleduration`。`staticlogo`是logo图片的大小，`logolink`是logo链接的URL，`alttext`是logo的替代文本，`fadeintoview`控制是否启用淡入淡出效果（1表示启用，0表示不启用），`visibleduration`则是logo在屏幕可见的时间，单位为秒。 `<SCRIPT language=JavaScript>`标签内包含了JavaScript代码，这些代码负责处理logo的淡入淡出效果。如果浏览器支持`document.images`（即IE4+或非IE浏览器），会创建一个新的`Image`对象，预加载logo图片。然后根据`fadeintoview`的值，设置logo元素的初始透明度，如果启用淡入效果，设置为完全透明。接下来，`<body>`标签内的代码会创建一个`<span>`元素，作为logo的容器，并设置其绝对定位，宽高与logo图片一致。`bringintoview`函数通过调整logo的透明度实现淡入效果，每次增加5的透明度，直到达到95，然后隐藏logo。`createLogo`函数则负责在页面加载时创建并显示logo。如果浏览器支持`document.layers`（Netscape Navigator 4.x），代码会设置窗口缩放时重新加载页面，以适应logo的位置。`regenerate2`函数就是为此目的而设计的。这个代码片段展示了如何结合HTML和JavaScript来创建动态效果，尤其是在老版本的浏览器中。不过，现代的Web开发通常使用更先进的技术如CSS3的`transition`属性来实现类似的动画效果，这不仅更简洁，而且兼容性更好。然而，对于学习基础的JavaScript动画技巧，这个代码仍有一定的参考价值。

先做一个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页未读，立即下载

qq_17015309

粉丝: 0
资源: 2

JavaScript实现LOGO淡入效果代码

显示logo的例子(8KB)

css3绘制天猫logo实现代码

jquery+css3实现的网站LOGO图标轮播展示特效代码.zip

淡入淡出效果的Tab选项卡

简易方法淡入淡出启动画面.zip

HTML5 Canvas简单淡入淡出游戏启动界面

制作淡入淡出的程序窗口启动画面.zip

jquery前台logo页面

应用程序logo展示

美工logo设计思路

最新资源