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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
javascript实现拖拽碰撞检测
Mar 12 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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
smarty内置函数config_load用法实例
2015/01/22 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP7多线程搭建教程
2017/04/21 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript动画浅析
2012/08/30 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
详解python解压压缩包的五种方法
2019/07/05 Python
python getpass模块用法及实例详解
2019/10/07 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
国家助学金获奖感言
2014/01/31 职场文书
学生保证书范文
2014/04/28 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
MySQL常用慢查询分析工具详解
2022/08/14 MySQL