软件开发培训班 >> 编程开发 >> JavaScript

用Javascript 编写可以缓慢弹出收缩的层

　　本文标签：Javascript,收缩层

<!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>

技术文章快速查找

jQuery让控件左右移动的三种实现方法

扩展javascript的Date方法实现代码(prototype)

jquery sortable的拖动方法示例详解

js中数组Array的一些常用方法总结

Jquery+WebService 校验账号是否已被注册的代码

javaScript 页面自动加载事件详解

JavaScript CSS修改学习第二章样式

点击提交按钮后按钮变灰色不可用状态的三种方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建