层的开发在实际应用中比较重要，比如漂浮广告等等，我这里简单探讨一下。 1. 控制层的显示或隐藏 两种办法，其实都是控制样式的。 办法一：控制 display 属性 [removed] function show(status) { document.getElementById(“div1”).style.display = status; } [removed] <div u00a0id=”div1″ style>
在JavaScript中，对层（Layer）的控制是网页动态效果实现的关键技术，广泛应用于广告、提示信息、导航菜单等场景。下面将详细讲解如何在JavaScript中实现层的显示与隐藏，以及如何让层进行动态运动。
1. **控制层的显示或隐藏**
层的显示和隐藏主要通过修改CSS样式中的`display`或`visibility`属性来实现。
- **办法一：控制`display`属性**
使用`document.getElementById()`方法获取到层的DOM元素，然后设置其`style.display`属性为`'block'`或`'none'`，分别用于显示和隐藏层。例如：
```javascript
function show(status) {
document.getElementById("div1").style.display = status;
}
```
在HTML中，你可以通过链接调用这个函数，如：
```html
<a href="#" onClick="show('block')">显示</a>
<a href="#" onClick="show('none')">关闭</a>
```
- **办法二：控制`visibility`属性**
类似地，通过改变`style.visibility`属性为`'visible'`或`'hidden'`，也可以实现层的显示和隐藏。例如：
```javascript
function show(status) {
document.getElementById("div1").style.visibility = status;
}
```
和之前一样，你可以创建链接来触发显示和隐藏。
如果需要定时关闭层，可以使用`setTimeout`函数，如下所示：
```javascript
function setTimeStart() {
window.setTimeout(hiddenTips, 4000);
}
```
2. **控制层的运动，类似浮动广告**
层的动态运动通常是通过改变`style.left`和`style.top`属性的值来实现的。这通常涉及到数学运算，如正弦、余弦函数，以模拟平滑的移动效果。
以下是一个简单的例子，让层在页面上随机运动：
```javascript
var a = 200, b = 100; // 初始位置参数
var c = 0.1; // 时间变化系数
var d = 5; // 变化周期
var t = 0; // 时间变量
function float_1() {
var random1 = 100 * Math.random();
var random2 = 100 * Math.random();
var float_1 = document.getElementById("float_1");
float_1.style.left = Math.round(a * Math.cos(t) * Math.cos(t / d) + a) + random1 + "px";
float_1.style.top = Math.round(b * Math.sin(t) + b) + random2 + "px";
t += c;
setTimeout(float_1, 500); // 每隔500毫秒执行一次
}
```
在HTML中，确保`<body>`标签加载时调用`float_1`函数：
```html
<body onLoad="float_1()">
<div id="float_1" style="position:absolute;width:200;height:100;z-index:2;visibility:visible">让我动起来。</div>
</body>
```
这段代码定义了一个名为`float_1`的函数，它不断更新层的位置，使得层看起来在页面上随机运动。`setTimeout`函数被用来定期调用`float_1`，实现持续的动画效果。
总结，JavaScript中的层控制涉及CSS样式的动态修改，主要通过`display`和`visibility`属性控制层的可见性，以及通过修改`left`和`top`属性实现层的动态运动。通过结合数学计算和定时器，我们可以创建各种复杂的动态效果，提升用户体验。
