用Javascript 编写可以缓慢弹出收缩的层
作者:bea
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层的扩展与收缩</title> </he
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>层的扩展与收缩</title>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
function StretchDiv(divid,color){
var target;
var flag=false;
var onMouseDown=function(){
if(flag){
var h=parseInt(target.style.height);
onMouseDown.shortDiv=function(){
h=h-1;
if(h<20){
return;
}
target.style.height=h+"px";
setTimeout(onMouseDown.shortDiv,30);
}
onMouseDown.shortDiv();
}
else {
//target.style.height=parseInt(target.style.height)+180+"px";
var h=parseInt(target.style.height);
onMouseDown.longDiv=function(){
h=h+1;
if(h>200){
return;
}
target.style.height=h+"px";
setTimeout(onMouseDown.longDiv,30);
}
onMouseDown.longDiv();
}
flag=!flag;
}
function init(){
target=document.getElementById(divid);
target.style.position = "absolute";
target.style.width = "200px";
target.style.height = "20px";
target.style.left = "100px";
target.style.top = "100px";
target.style.backgroundColor = color;
target.onmousedown = onMouseDown;
}
init();
}
new StretchDiv("div1","blue");
</script>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>层的扩展与收缩</title>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
function StretchDiv(divid,color){
var target;
var flag=false;
var onMouseDown=function(){
if(flag){
var h=parseInt(target.style.height);
onMouseDown.shortDiv=function(){
h=h-1;
if(h<20){
return;
}
target.style.height=h+"px";
setTimeout(onMouseDown.shortDiv,30);
}
onMouseDown.shortDiv();
}
else {
//target.style.height=parseInt(target.style.height)+180+"px";
var h=parseInt(target.style.height);
onMouseDown.longDiv=function(){
h=h+1;
if(h>200){
return;
}
target.style.height=h+"px";
setTimeout(onMouseDown.longDiv,30);
}
onMouseDown.longDiv();
}
flag=!flag;
}
function init(){
target=document.getElementById(divid);
target.style.position = "absolute";
target.style.width = "200px";
target.style.height = "20px";
target.style.left = "100px";
target.style.top = "100px";
target.style.backgroundColor = color;
target.onmousedown = onMouseDown;
}
init();
}
new StretchDiv("div1","blue");
</script>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS 操作日期 顺便实现 上一周 和 下一周 功能
- jquery 插件开发方法小结
- 文字瞬间从左到右切换显示的JavaScript代码
- 用按钮触发Javascript动态生成一个表格的代码
- VBScript 实现文字遮罩
- jquery 屏蔽一个区域内的所有元素,禁止输入
- javascript 网页上跳动的文字
- JavaScript 仿歌词效果
- JavaScript数组应用 可依次读取的公告栏文字
- 仿打字特效的JS逐字出现的信息文字
- JavaScript 平滑文字闪烁
- javascript 洒脱飘动的文字
- JavaScript 炫彩的文字
- Javascript 小写字母依次变为大写
- Js+CSS 文字渐隐渐现显示
- Domino中运用jQuery读取视图内容的方法
- JS 截取字符串substr 和 substring方法的区别
- JavaScript 常用函数库详解
- 再谈ie和firefox下的document.all属性