js实现DIV的一些简单控制


Posted in Javascript onJune 04, 2007

<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>

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
CCPry JS类库 代码
Oct 30 Javascript
理解javascript闭包
Dec 15 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
Vue+Django项目部署详解
May 30 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 #Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 #Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 #Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
详细介绍Python中的偏函数
2015/04/27 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
升学宴演讲稿
2014/09/01 职场文书
办公用房租赁协议书
2014/11/29 职场文书
英文感谢信范文
2015/01/21 职场文书
风之谷观后感
2015/06/11 职场文书
环保证明
2015/06/23 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫