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

更新时间：2009年10月21日 14:11:29 作者：

前天老师布置了一道思考题，用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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js防止DIV布局滚动时闪动的解决方法
这篇文章主要介绍了js防止DIV布局滚动时闪动的解决方法,通过js的window.requestAnimationFrame来解决这一问题,非常具有实用价值,需要的朋友可以参考下
2014-10-10
一文带你深入了解JavaScript中的闭包
闭包（closure）是一个函数以及其捆绑的周边环境状态的引用的组合，就是让开发者可以从内部函数访问外部函数的作用域，下面下面小编就来和大家深入聊聊它的使用吧
2023-07-07
使用firebug进行调试javascript的示例
调试javascript的方法有很多，在本文为大家介绍下使用firebug是如何做到的，感兴趣的朋友可以参考下
2013-12-12
A标签触发onclick事件而不跳转的多种解决方法
一个标签仅仅是要触发onclick行为，遇到了A标签触发onclick事件时不执行跳转，下面与大家分享下四种解决方法，感兴趣的朋友可以参考下哈
2013-06-06
js实现运行代码需要刷新的解决方法
js实现运行代码需要刷新的解决方法...
2007-08-08
JavaScript中处理数组,对象和正则的实用函数
本文主要分享一下最近项目中遇到的一些javascript的业务逻辑函数,这些函数可以提成一个公用的工具函数以便于在以后的项目中进行使用,希望对大家有所帮助
2023-11-11
JavaScript Date对象详解
这篇文章主要为大家详细介绍了JavaScript Date对象，介绍 Date 日期和时间对象的操作，感兴趣的小伙伴们可以参考一下
2016-03-03
JS实现li标签的删除
这篇文章主要为大家详细介绍了JS实现li标签的删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-04-04
innerText innerHTML的用法以及注意事项 [推荐]
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。
2009-05-05
javascript表单验证和Window详解
这篇文章主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
2014-12-12