`
siashuayongsheng
  • 浏览: 121958 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

javascript 对层的控制

阅读更多
层的开发在实际应用中比较重要,比如漂浮广告等等,我这里简单探讨一下。
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方法进行调用,每隔多少秒运行一次,达到一直运动的目的。
分享到:
评论

相关推荐

    javascript弹出层

    通过`addEventListener`方法,我们可以为元素绑定`click`事件监听器,并在回调函数中控制弹出层的展示。例如: ```javascript const popupButton = document.getElementById('popupBtn'); const popup = document...

    JavaScript弹出层

    2. CSS样式:弹出层的外观主要由CSS控制,包括位置、大小、背景颜色、边框、阴影等。全屏锁定可以通过设置`position: fixed`,`z-index`确保弹出层位于最顶层,并通过调整body的overflow属性防止滚动。 3. ...

    JavaScript弹出遮盖层

    3. **JavaScript交互**:使用JavaScript来控制遮盖层和弹出框的显示和隐藏。可以使用`addEventListener`来监听用户事件,如点击按钮,然后通过修改CSS的`display`属性来切换它们的状态。 ```javascript document....

    JavaScript实现层的切换

    在网页设计中,层(Layer)的概念是用于组织和控制页面元素的重要工具,可以实现诸如图片、文本或其他元素的显示和隐藏,以及动态效果的创建。本篇文章将深入探讨如何使用JavaScript实现层的切换,并以此为基础,...

    JAVASCRIPT弹出DIV层窗口实例

    接下来,我们需要编写JavaScript代码来控制弹出窗口的显示和隐藏。这通常在单独的`&lt;script&gt;`标签内或者外部的JS文件(如`script.js`)中完成。以下是一个简单的JavaScript函数示例: ```javascript function show...

    javascript弹出层并锁屏

    在JavaScript中,我们可以使用DOM操作来控制弹出层的显示和隐藏。例如,通过改变div元素的`style.display`属性,可以实现弹出层的开关。当`display`设置为`none`时,弹出层隐藏;设置为`block`或`inline-block`时,...

    纯javascript 完美 无障碍层拖拽

    "纯javascript 完美 无障碍层拖拽"这个标题表明我们要讨论的是一个使用纯JavaScript实现的、功能完善的、具有无障碍性(即对残障人士友好)的层拖拽技术。这里的“层”通常指的是网页中的浮动元素或者对话框,而“无...

    Javascript实现的遮罩层

    然后,我们使用JavaScript来控制遮罩层的显示和隐藏。这里可以使用`addEventListener`来监听用户触发的事件,例如点击按钮: ```javascript document.getElementById('myButton').addEventListener('click', ...

    javascript层的多种实现

    JavaScript层的实现是Web开发中的一个重要概念,尤其是在构建复杂交互和动态用户界面时。JavaScript作为客户端脚本语言,它的灵活性和强大的功能使得开发者能够创建出丰富的网页应用。在这个主题下,我们将探讨...

    javascript弹出层问题

    JavaScript是实现这一功能的核心语言,它允许开发者通过动态修改DOM(文档对象模型)来控制弹出层的显示和隐藏。 二、弹出层的实现方式 1. DOM操作:通过创建新的HTML元素(如div)并设置样式,然后将其添加到页面...

    javascript遮罩层的弹出框

    遮罩层通常由一个全屏的、半透明的div元素组成,通过CSS控制其样式和位置。在CSS样式中,可能会涉及到定位(positioning)、层级(z-index)、透明度(opacity)等属性的设置。 JavaScript部分则负责弹出框的显示、...

    javascript层收缩效果

    标题中的“javascript层收缩效果”指的是使用JavaScript实现的网页元素(通常称为“层”或“div”)在用户交互下进行尺寸变化的效果。这种效果常见于菜单、侧边栏、弹窗等,使得页面布局更加动态和交互友好。在网页...

    javascript 做的小游戏 弹球 利用js控制层位置

    在这个游戏中,玩家通常通过控制一个挡板来反弹弹球,避免球触底,以此来得分。接下来,我们将深入探讨这个游戏背后的几个关键知识点。 1. **JavaScript基础**:JavaScript是网页交互的核心,它允许我们改变HTML...

    JAVASCRIPT 弹出层

    3. **JavaScript交互**:接下来,编写JavaScript代码来控制弹出层的显示和关闭。可以使用`document.getElementById`方法获取DOM元素,然后通过改变`style.display`属性来控制其可见性。例如: ```javascript ...

    javascript_page层显示

    在JavaScript编程中,"页面层显示"通常指的是对网页元素的可见性进行控制,以便实现交互效果或动态更新用户界面。这涉及到DOM(Document Object Model)操作,CSS样式修改以及事件监听等多个方面。以下是关于这一...

    javaScript弹出层合集

    这个合集可能包括了各种自定义弹出层的实现方式,如使用CSS和JavaScript进行动态创建和控制,或者利用流行的库如jQuery UI、Bootstrap Modal、SweetAlert等。这些库和框架提供了丰富的样式选项和灵活的配置,使得...

    遮罩层 javascript js 数据提交

    在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过JavaScript动态控制的。 首先,创建遮罩层通常需要在HTML中添加一个元素,如一个全屏的div,然后通过CSS设置其样式,包括颜色、透明度和位置等,使其...

    JavaScript弹出遮罩层

    其次,`ShowDiv.js`是JavaScript文件,它是控制遮罩层行为的核心。这个文件可能会包含以下功能: 1. **初始化**:在页面加载完成后,可能需要对遮罩层进行初始化,比如设置初始样式或者事件监听器。 2. **显示遮罩...

Global site tag (gtag.js) - Google Analytics