Heim > Web-Frontend > js-Tutorial > javascript中对对层的控制_javascript技巧

javascript中对对层的控制_javascript技巧

WBOY
Freigeben: 2016-05-16 19:22:12
Original
1045 Leute haben es durchsucht

层的开发在实际应用中比较重要,比如漂浮广告等等,我这里简单探讨一下。

1.  控制层的显示或隐藏

两种办法,其实都是控制样式的。

办法一:控制 display 属性

<script> <BR>function show(status) <BR>{ <BR> document.getElementById("div1").style.display = status; <BR>} <br><br></script>


           这是一层,能看见吗,呵呵.

显示
关闭


办法二 控制 visibility 属性

<script> <BR>function show(status) <BR>{ <BR> document.getElementById("div1").style.visibility = status; <BR>} <br><br><div id="div1" style="left:10px;top:200px;width:250;height:100;z-index:2;visibility=hideen;"> <BR> 这是一层,能看见吗,呵呵. <BR> <BR><a href=# onClick="show('visible);">显示 <BR><a href=# onClick="show('hidden')">关闭 <br><br><BR>如果要控制层定时关闭的话,可以加上: <br><br>function setTimeStart() <BR> 10 { <BR> 11 window.setTimeout(hiddenTips,4000); <BR> 12 }^ <BR></script>

上面代码就是利用setTimeout方法来控制4秒后关闭层。


2.  控制层的运动,类似于浮动广告

主要就是通过控制层样式中的top和left属性的值来运动,通过随机生成不同的值,看起来就象在运动一样。

<script> <BR>var a=200, b=100; <BR>var c=0.1; <BR>var d=5; <BR>var t=0; <br><br>function float_1() <BR>{ <BR> var random1 = 100*Math.random(); <BR> var random2 = 100*Math.random(); <br><br> var float_1 = document.all ? document.all.float_1.style : document.float_1; <BR> float_1.left = Math.round(a*Math.cos(t)*Math.cos(t/d)+a)+random1; <BR> float_1.top = Math.round(b*Math.sin(t)+b)+random2; <br><br> t+=c; <br><br> setTimeout("float_1()", 500); <br><br>} <BR></script>





让我动起来。




通过 setTimeout方法进行调用,每隔多少秒运行一次,达到一直运动的目的。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage