Heim > Web-Frontend > js-Tutorial > js实现DIV的一些简单控制_javascript技巧

js实现DIV的一些简单控制_javascript技巧

WBOY
Freigeben: 2016-05-16 19:12:39
Original
792 Leute haben es durchsucht



<script> <BR>var d1, d2, d3, w, h; <BR>window.onload = function() { <BR>d1 = document.getElementById('d1'); <BR>d2 = document.getElementById('d2'); <BR>d3 = document.getElementById('d3'); <BR>back(); <BR>w = window.innerWidth; <BR>h = window.innerHeight; <BR>resizeCheck(); <BR>} <BR>function resizeCheck() { <BR>if (w != window.innerWidth || h != window.innerHeight) { <BR>location.replace(location.href); <BR>return; <BR>} <BR>setTimeout("resizeCheck()", 1000); <BR>} <BR>function back() { <BR>divMoveTo(d1,200,50); <BR>divMoveTo(d2,250,75); <BR>divMoveTo(d3,75,75); <BR>divZIndex(d1,1); <BR>divZIndex(d2,2); <BR>divZIndex(d3,3); <BR>divBgColor(d1,'#555'); <BR>divBgColor(d2,'#777'); <BR>divBgColor(d3,'#999'); <BR>divTxtColor(d1,'#fff'); <BR>divTxtColor(d2,'#fff'); <BR>divTxtColor(d3,'#fff'); <BR>divShow(d1); <BR>divShow(d2); <BR>divShow(d3); <BR>} <BR>function color() { <BR>divBgColor(d1,'#f02d2d'); <BR>divBgColor(d2,'#f040d1'); <BR>divBgColor(d3,'#55afe0'); <BR>divTxtColor(d1,'#fff'); <BR>divTxtColor(d2,'#fff'); <BR>divTxtColor(d3,'#fff'); <BR>} <BR>function divMoveTo(d, x, y) { <BR>d.style.pixelLeft = x; <BR>d.style.pixelTop = y; <BR>} <BR>function divMoveBy(d, dx, dy) { <BR>d.style.pixelLeft += dx; <BR>d.style.pixelTop += dy; <BR>} <BR>function divShow(d) { <BR>d.style.visibility = 'visible'; <BR>} <BR>function divHide(d) { <BR>d.style.visibility = 'hidden'; <BR>} <BR>function divSizeTo(d, w, h) { <BR>d.style.pixelWidth = w; <BR>d.style.pixelHeight = h; <BR>} <BR>function divSizeBy(d, dw, dh) { <BR>d.style.pixelWidth += dw; <BR>d.style.pixelHeight += dh; <BR>} <BR>function divZIndex(d, z) { <BR>d.style.zIndex = z; <BR>} <BR>function divBgColor(d, c) { <BR>d.style.background = c; <BR>} <BR>function divTxtColor(d, c) { <BR>d.style.color = c; <BR>} <BR></script>



DHTML方法基础 - 对DIV的一些简单控制 BY 51js zdzhuo






































d1


d2


d2包含d3

d3


d3是d2的子层
       


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