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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
JavaScript实现优先级队列
Dec 06 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php计算年龄精准到年月日
2015/11/17 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
$()JS小技巧
2007/07/21 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
Linux机考试题
2015/10/16 面试题
计算机学生的自我评价分享
2014/02/18 职场文书
努力学习演讲稿
2014/05/10 职场文书
个人作风建设自查报告
2014/10/22 职场文书
大学生求职信怎么写
2015/03/19 职场文书
升职自荐信范文
2015/03/27 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python