JavaScript实现缓慢展开网页特效代码

4星 · 超过85%的资源需积分: 3 99 浏览量更新于2024-09-22 收藏 4KB TXT 举报

"网页特效-缓慢展开网页特效" 这篇资源是一个关于网页特效的示例，具体是实现网页内容缓慢展开的效果。这种特效可以增加用户交互体验，使得网页内容的加载过程更具动态感，吸引用户的注意力。下面我们将详细探讨这个特效的实现原理及相关的HTML和JavaScript知识点。首先，HTML部分定义了文档的基本结构，包括`<!DOCTYPE>`声明、`<html>`、`<head>`和`<body>`标签。`<title>`标签用于设置网页的标题，`<meta>`标签则用来设定字符编码（这里是GBK，一种中文字符编码）。在`<style>`标签内，定义了页面中链接（`<a>`标签）的各种状态样式，如未访问、已访问、激活和悬停时的颜色和装饰效果，以及页面中字体的大小设置。接着，JavaScript部分是实现缓慢展开特效的关键。这段代码使用了古老的JavaScript语法，适用于IE浏览器（由`document.all`判断可见）。`expandingWindow`函数接受一个参数`website`，该函数的作用是打开一个新的窗口，并使新窗口的内容从屏幕的左上角开始，以设定的速度缓缓展开到整个窗口。 `heightspeed`和`widthspeed`分别代表垂直和水平滚动速度，数值越大，展开速度越慢。`leftdist`和`topdist`表示新窗口距离屏幕左侧和顶部的距离。`winwidth`和`winheight`则计算出新窗口的宽度和高度，基于屏幕可用宽度和高度减去预设的边距。函数内部使用了`window.open()`方法创建新窗口，并通过空字符串`""`作为第二个参数，保留浏览器默认的新窗口属性。第三参数是一个字符串，包含新窗口的位置和大小属性，这些属性由JavaScript变量动态构建。接下来的代码片段是新窗口内容展开的核心，使用了`setTimeout`函数来实现延迟执行。它会在指定的毫秒数后调用`moveTo`和`resizeTo`方法，逐步调整新窗口的位置和大小，模拟出缓慢展开的效果。这个过程会递归进行，每次调整后再次调用`setTimeout`，直到窗口达到预定的大小。这种特效在现代网页设计中可能较少使用，因为现代浏览器和用户更倾向于平滑、流畅的过渡动画，而不是逐步展开的效果。然而，对于学习网页开发和理解JavaScript基本动画原理的人来说，这种老式的特效仍然是一个有价值的参考实例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>网页特效|Linkweb.cn/Js|---缓慢展开的打开页面特效</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>A:link {
COLOR: #000080; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
A:visited {
COLOR: #006677; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
A:active {
COLOR: #ff0000; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
A:hover {
COLOR: #ff0000; TEXT-DECORATION: underline
}
BODY {
FONT-SIZE: 9pt
}
TH {
FONT-SIZE: 9pt
}
TD {
FONT-SIZE: 9pt
}
</STYLE>

<META content="MSHTML 6.00.2900.6058" name=GENERATOR></HEAD>
<BODY leftMargin=0 topMargin=0>
<SCRIPT language=JavaScript>

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

gaoli429

粉丝: 13

JavaScript实现缓慢展开网页特效代码

实用jQuery大小图滚动切换网页特效

最新分类搜索框网页特效精选推荐

CSS3打造电子结算单折叠显示的网页特效

网页特效库

SVG玫瑰花盛开动画网页特效

jQuery列表展开折叠特效特效代码

网页设计特效代码Dreamweaver

jQuery鼠标滑过图片动画滑动展开特效特效代码

jquery鼠标悬停缓慢下拉导航特效代码

网页的一些超酷超炫特效

最新资源