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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
angularjs自定义过滤器demo示例
Aug 24 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
PHP入门教程之上传文件实例详解
2016/09/11 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
angular4中关于表单的校验示例
2017/10/16 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python创建临时文件夹的方法
2015/07/06 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python绘制随机网络图形示例
2019/11/21 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
教师作风建设剖析材料
2014/10/11 职场文书
公司内部升职自荐信
2015/03/27 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
党支部半年考察意见
2015/06/01 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python