`
- 浏览:
121185 次
- 性别:
- 来自:
郑州
-
层的开发在实际应用中比较重要，比如漂浮广告等等，我这里简单探讨一下。
1. 控制层的显示或隐藏
两种办法，其实都是控制样式的。
办法一：控制 display 属性
<script language="javascript">
function show(status)
{
document.getElementById("div1").style.display = status;
}
</script>
<div id="div1" style="left:10px;top:200px;width:250;height:100;z-index:2;">
这是一层,能看见吗,呵呵.
</div>
<a href=# onClick="show('block');">显示</a>
<a href=# onClick="show('none')">关闭</a>
办法二 控制 visibility 属性
<script language="javascript">
function show(status)
{
document.getElementById("div1").style.visibility = status;
}
<div id="div1" style="left:10px;top:200px;width:250;height:100;z-index:2;visibility=hideen;">
这是一层,能看见吗,呵呵.
</div>
<a href=# onClick="show('visible);">显示</a>
<a href=# onClick="show('hidden')">关闭</a>
如果要控制层定时关闭的话，可以加上：
function setTimeStart()
10 {
11 window.setTimeout(hiddenTips,4000);
12 }^
</script>
上面代码就是利用setTimeout方法来控制4秒后关闭层。
2. 控制层的运动，类似于浮动广告
主要就是通过控制层样式中的top和left属性的值来运动，通过随机生成不同的值，看起来就象在运动一样。
<script language="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.all ? document.all.float_1.style : document.float_1;
float_1.left = Math.round(a*Math.cos(t)*Math.cos(t/d)+a)+random1;
float_1.top = Math.round(b*Math.sin(t)+b)+random2;
t+=c;
setTimeout("float_1()", 500);
}
</script>
</head>
<body onLoad="float_1()"><div id="float_1" style="position:absolute;width:200;height:100;z-index:2;visibility:visible">
让我动起来。
</div>
</body>
通过 setTimeout方法进行调用，每隔多少秒运行一次，达到一直运动的目的。
分享到：
相关推荐
通过`addEventListener`方法，我们可以为元素绑定`click`事件监听器，并在回调函数中控制弹出层的展示。例如： ```javascript const popupButton = document.getElementById('popupBtn'); const popup = document...
2. CSS样式：弹出层的外观主要由CSS控制，包括位置、大小、背景颜色、边框、阴影等。全屏锁定可以通过设置`position: fixed`，`z-index`确保弹出层位于最顶层，并通过调整body的overflow属性防止滚动。 3. ...
3. **JavaScript交互**：使用JavaScript来控制遮盖层和弹出框的显示和隐藏。可以使用`addEventListener`来监听用户事件，如点击按钮，然后通过修改CSS的`display`属性来切换它们的状态。 ```javascript document....
在网页设计中，层（Layer）的概念是用于组织和控制页面元素的重要工具，可以实现诸如图片、文本或其他元素的显示和隐藏，以及动态效果的创建。本篇文章将深入探讨如何使用JavaScript实现层的切换，并以此为基础，...
接下来，我们需要编写JavaScript代码来控制弹出窗口的显示和隐藏。这通常在单独的`<script>`标签内或者外部的JS文件（如`script.js`）中完成。以下是一个简单的JavaScript函数示例： ```javascript function show...
在JavaScript中，我们可以使用DOM操作来控制弹出层的显示和隐藏。例如，通过改变div元素的`style.display`属性，可以实现弹出层的开关。当`display`设置为`none`时，弹出层隐藏；设置为`block`或`inline-block`时，...
"纯javascript 完美 无障碍层拖拽"这个标题表明我们要讨论的是一个使用纯JavaScript实现的、功能完善的、具有无障碍性（即对残障人士友好）的层拖拽技术。这里的“层”通常指的是网页中的浮动元素或者对话框，而“无...
然后，我们使用JavaScript来控制遮罩层的显示和隐藏。这里可以使用`addEventListener`来监听用户触发的事件，例如点击按钮： ```javascript document.getElementById('myButton').addEventListener('click', ...
JavaScript层的实现是Web开发中的一个重要概念，尤其是在构建复杂交互和动态用户界面时。JavaScript作为客户端脚本语言，它的灵活性和强大的功能使得开发者能够创建出丰富的网页应用。在这个主题下，我们将探讨...
JavaScript是实现这一功能的核心语言，它允许开发者通过动态修改DOM（文档对象模型）来控制弹出层的显示和隐藏。 二、弹出层的实现方式 1. DOM操作：通过创建新的HTML元素（如div）并设置样式，然后将其添加到页面...
遮罩层通常由一个全屏的、半透明的div元素组成，通过CSS控制其样式和位置。在CSS样式中，可能会涉及到定位（positioning）、层级（z-index）、透明度（opacity）等属性的设置。 JavaScript部分则负责弹出框的显示、...
标题中的“javascript层收缩效果”指的是使用JavaScript实现的网页元素（通常称为“层”或“div”）在用户交互下进行尺寸变化的效果。这种效果常见于菜单、侧边栏、弹窗等，使得页面布局更加动态和交互友好。在网页...
在这个游戏中，玩家通常通过控制一个挡板来反弹弹球，避免球触底，以此来得分。接下来，我们将深入探讨这个游戏背后的几个关键知识点。 1. **JavaScript基础**：JavaScript是网页交互的核心，它允许我们改变HTML...
3. **JavaScript交互**：接下来，编写JavaScript代码来控制弹出层的显示和关闭。可以使用`document.getElementById`方法获取DOM元素，然后通过改变`style.display`属性来控制其可见性。例如： ```javascript ...
在JavaScript编程中，"页面层显示"通常指的是对网页元素的可见性进行控制，以便实现交互效果或动态更新用户界面。这涉及到DOM（Document Object Model）操作，CSS样式修改以及事件监听等多个方面。以下是关于这一...
这个合集可能包括了各种自定义弹出层的实现方式，如使用CSS和JavaScript进行动态创建和控制，或者利用流行的库如jQuery UI、Bootstrap Modal、SweetAlert等。这些库和框架提供了丰富的样式选项和灵活的配置，使得...
在此过程中，遮罩层的出现和消失以及提交操作的执行，都是通过JavaScript动态控制的。 首先，创建遮罩层通常需要在HTML中添加一个元素，如一个全屏的div，然后通过CSS设置其样式，包括颜色、透明度和位置等，使其...
其次，`ShowDiv.js`是JavaScript文件，它是控制遮罩层行为的核心。这个文件可能会包含以下功能： 1. **初始化**：在页面加载完成后，可能需要对遮罩层进行初始化，比如设置初始样式或者事件监听器。 2. **显示遮罩...