JavaScript笔记(展开的层)-4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#DivData

...{

overflow:hidden;/**//*层内的数据超过层的显示范围时隐藏*/

z-index: 101;

left: 304px;

width: 450px;

position: absolute; /**//*绝对定位,设置层的显示位置*/

height: 0px; /**//*初始高度*/

background-color:#ff9933;

}

</style>

var lwheight=350;/**//*最大的高度*/

var lwminheight=0;/**//*最小的高度*/

var DivData;/**//*层对象,方便跨越函数使用*/

function ShowDiv(sender)

...{

DivData=document.getElementById("DivData");

DivData.style.top=sender.offsetTop+sender.offsetHeight;/**//*设置层的初始位置,根据文本框的位置设置*/

DivData.style.left=sender.offsetLeft;

ShowOffset();//开始展开的效果

}

function ShowOffset()

...{

var nowoffest=parseInt(DivData.offsetHeight);//获取层的现有高度

if(nowoffest<lwheight)//判断现有高度是否小于最大高度

...{

if(DivData!=null)//如果层对象存在

...{

DivData.style.height=(nowoffest+10)+"px";//重新改变层的高度

}

ti=window.setTimeout("ShowOffset()",40);//设置定时器,每40毫秒高度改变10px;

}

function HidOffest()//显示的一个逆向过程

...{

var nowoffest=parseInt(DivData.offsetHeight);

if(ti!=null)//如果ti不为空的话就话就是说层处于展开的效果中,这是时候如果收缩的话必须先取消展开的效果

...{

window.clearTimeout(ti);//取消展开的效果

}

if(nowoffest>lwminheight)

...{

if(DivData!=null)

...{

DivData.style.height=(nowoffest-10)+"px";

}

window.setTimeout("HidOffest()",40);

}

function SetValue(sender)

...{

document.getElementById("TBSelectData").value=sender.value;

}

</script>

</head>

<body>

<br />

</div>

</body>

</html>

转载于:https://www.cnblogs.com/zhuibobo/articles/978836.html

JavaScript笔记(展开的层)-4相关推荐

狂神Javascript笔记
学习狂神JavaScript所记录的笔记 Javascript笔记一.前端核心分析 1.1.概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合. HTML ...
JavaScript笔记（狂神说）
JavaScript笔记(狂神说) 本文章根据b站狂神说javascript视频教程整理视频链接:https://www.bilibili.com/video/BV1JJ41177di?from=s ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
[Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
尚硅谷李立超JavaScript笔记
李立超老师JavaScript笔记目录 1.JS简介 2.JS的HelloWorld 3.JS代码编写的位置 4.JS的基本语法 5.字面量与变量 6.标识符 7.数据类型 8.强制类型转换 1. ...
JavaScript笔记（一）
JavaScript笔记(一) 1 JavaScript简介 JavaScript,就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行. 我们在"HTML ...

JavaScript笔记(展开的层)-4

JavaScript笔记(展开的层)-4相关推荐

最新文章

热门文章