快捷導(dǎo)航

javascript中對對層的控制

更新時間：2006年12月29日 00:00:00 作者：

層的開發(fā)在實(shí)際應(yīng)用中比較重要，比如漂浮廣告等等，我這里簡單探討一下。

1.  控制層的顯示或隱藏

兩種辦法，其實(shí)都是控制樣式的。

辦法一：控制 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')">關(guān)閉</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')">關(guān)閉</a>

如果要控制層定時關(guān)閉的話，可以加上：

function setTimeStart()
     10 {
     11     window.setTimeout(hiddenTips,4000);
     12 }^
</script>

上面代碼就是利用setTimeout方法來控制4秒后關(guān)閉層。

2.  控制層的運(yùn)動，類似于浮動廣告

主要就是通過控制層樣式中的top和left屬性的值來運(yùn)動，通過隨機(jī)生成不同的值，看起來就象在運(yùn)動一樣。

<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方法進(jìn)行調(diào)用，每隔多少秒運(yùn)行一次，達(dá)到一直運(yùn)動的目的。

javascript中對對層的控制

相關(guān)文章

JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度
這篇文章主要介紹了使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度,需要的朋友可以參考下
2014-12-12
用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
根據(jù)TreeView2.js修改后的TreeView父節(jié)點(diǎn)與子節(jié)點(diǎn)的CheckBox聯(lián)動.
2010-03-03
如何屏蔽防止別的網(wǎng)站嵌入框架代碼
目前，國內(nèi)很流行一種流氓行為：使用框架(Frame)，將你的網(wǎng)頁嵌入它的網(wǎng)頁中,如何防止嵌入框架代碼呢，下面小編給大家整理了相關(guān)資料，如何屏蔽防止別的網(wǎng)站嵌入框架代碼，需要的朋友一起來學(xué)習(xí)下
2015-08-08
Bootstrap表單布局樣式代碼
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-05-05
js中常用的4種模糊查詢詳解(includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個關(guān)鍵詞或者某一個商品,所以模糊查詢和下拉匹配也成了前端必備的一個小技能,需要的朋友可以參考下
2023-11-11
Firebug入門指南(Firefox瀏覽器)
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。
2010-08-08
JavaScript實(shí)現(xiàn)的簡單煙花特效代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡單煙花特效代碼,涉及JavaScript數(shù)學(xué)運(yùn)算及頁面元素基于定時函數(shù)運(yùn)動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
解決Extjs下拉框不顯示的問題
一個父容器也是window的window下的comboBox在頁面中點(diǎn)擊無效，但是在控制臺中查看它的store卻是有值的，問題在于沒有顯示。下面小編給大家分享Extjs下拉框不顯示的問題，需要的的朋友參考下吧
2017-06-06
js讀取json文件片段中的數(shù)據(jù)實(shí)例
下面小編就為大家?guī)硪黄猨s讀取json文件片段中的數(shù)據(jù)實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03