js实现DIV的一些简单控制

<html>
<head>
<style type="text/css">
#d1 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #555;
}
#d2 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #777;
}
#d3 {
position: absolute;
width: 150px;
height: 150px;
visibility: hidden;
color: #fff;
background: #999;
}
</style>
<script>
var d1, d2, d3, w, h;
window.onload = function() {
d1 = document.getElementById('d1');
d2 = document.getElementById('d2');
d3 = document.getElementById('d3');
back();
w = window.innerWidth;
h = window.innerHeight;
resizeCheck();
}
function resizeCheck() {
if (w != window.innerWidth || h != window.innerHeight) {
location.replace(location.href);
return;
}  
setTimeout("resizeCheck()", 1000);
}
function back() {
divMoveTo(d1,200,50);
divMoveTo(d2,250,75);
divMoveTo(d3,75,75);
divZIndex(d1,1);
divZIndex(d2,2);
divZIndex(d3,3);
divBgColor(d1,'#555');
divBgColor(d2,'#777');
divBgColor(d3,'#999');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
divShow(d1);
divShow(d2);
divShow(d3);
}
function color() {
divBgColor(d1,'#f02d2d');
divBgColor(d2,'#f040d1');
divBgColor(d3,'#55afe0');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
}
function divMoveTo(d, x, y) {
d.style.pixelLeft = x;
d.style.pixelTop = y;
}
function divMoveBy(d, dx, dy) {
d.style.pixelLeft += dx;
d.style.pixelTop += dy;
}
function divShow(d) {
d.style.visibility = 'visible';
}
function divHide(d) {
d.style.visibility = 'hidden';
}
function divSizeTo(d, w, h) {
d.style.pixelWidth = w;
d.style.pixelHeight = h;
}
function divSizeBy(d, dw, dh) {
d.style.pixelWidth += dw;
d.style.pixelHeight += dh;
}
function divZIndex(d, z) {
d.style.zIndex = z;
}
function divBgColor(d, c) {
d.style.background = c;
}
function divTxtColor(d, c) {
d.style.color = c;
}
</script>
</head>
<body id="bodyId">
<form name="form1">
<h3>DHTML方法基础 - 对DIV的一些简单控制 BY 51js zdzhuo</h3>
<p>
<input type="button" value="移动d2" onclick="divMoveBy(d2,10,10)"><br>
<input type="button" value="移动d3到d2(0,0)" onclick="divMoveTo(d3,0,0)"><br>
<input type="button" value="移动d3到d2(75,75)" onclick="divMoveTo(d3,75,75)"><br>
</p>
<p>
<input type="button" value="放大d1" onclick="divSizeBy(d1,15,15)"><br>
<input type="button" value="缩小d1" onclick="divSizeBy(d1,-15,-15)"><br>
</p>
<p>
<input type="button" value="隐藏d2" onclick="divHide(d2)"><br>
<input type="button" value="显示d2" onclick="divShow(d2)"><br>
</p>
<p>
<input type="button" value="优先显示d1" onclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
<input type="button" value="优先显示d2" onclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
</p>
<p>
<input type="button" value="填充颜色" onclick="color()"><br>
</p>
<p>
<input type="button" value="返回默认状态" onclick="back()"><br>
</p>
</form>
<div id="d1">
<b>d1</b>
</div>
<div id="d2">
<b>d2</b><br><br>
d2包含d3
<div id="d3">
<b>d3</b><br><br>
d3是d2的子层
</div>       
</div>
</body>
</html>

赞 (0)

相关推荐

  • javascript控制Div层透明属性由浅变深由深变浅逐渐显示

    搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • JS实现用键盘控制DIV上下左右+放大缩小与变色

    用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作: 上:↑ 下:↓ 左:← 右:→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 用键盘控制DIV html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;bord

  • JS控制一个DIV层在指定时间内消失的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>定时关闭的层<

  • js控制div及网页相关属性的代码

    动态创建DIV:var div = document.createElement("div"); 设置div属性及样式等: div.title="this is a new div."; div.class = "newDivClass"; div.innerHTML = "Test create a div element!"; div.style.styleFloat="left"; div.style

  • js循环改变div颜色具体方法

    在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种: 复制代码 代码如下: for (var i; i < array.length; i++) {     statement; } for (var i in array) {     statement; } 这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的.源码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <st

  • javascript实现控制div颜色

    js控制div颜色 <html> <head> </head> <style> #div1{width:400px;height:400px;background-color:red;} </style> <script> function blue(){ div1=document.getElementById('div1'); div1.style.backgroundColor='blue'; } function pink()

  • javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码

    HTML部分代码: 复制代码 代码如下: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> javascript部分代码: 当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的 复制代码 代

  • js实现DIV的一些简单控制

    <html> <head> <style type="text/css"> #d1 { position: absolute; width: 300px; height: 300px; visibility: hidden; color: #fff; background: #555; } #d2 { position: absolute; width: 300px; height: 300px; visibility: hidden; color:

  • JS实现简单控制视频播放倍速的实例代码

    JS实现简单控制视频播放倍速的实例代码

    引言 之前就发现一个问题:有时候看一些学习视频,总是嫌它动作太慢,老师黑板上写板书很浪费时间,要是控制合适倍速播放,这样既能提升学习效率,也能让自己看着舒服点.所以我就学着写了下面这个网页,通过Html+CSS+JavaScript实现. 提示:以下是本篇文章正文内容,下面案例可供参考 一.成品效果 二.具体实现 1.HTML+CSS实现简单布局 代码如下(示例): <!DOCTYPE html> <html lang="en"> <head> &l

  • js防止DIV布局滚动时闪动的解决方法

    本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /

  • js 判断各种数据类型的简单方法(推荐)

    了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx)  如下实例: typeof   2      输出   number typeof   null   输出   object typeof   {}    输出   object typeof    []    输出   object typeof   (function(){})   输出  function typeof    undefined  输出  und

  • js实现在网页上简单显示时间的方法

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    JS实现的N多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • js实现弹窗居中的简单实例

    在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500px; } .mid-tanBox{ position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none } html代码 <div class=

  • JS之获取样式的简单实现方法(推荐)

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100

  • js不间断滚动的简单实现

    CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob

  • js实现div弹出层的方法

    本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv&quo

随机推荐