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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Javascript 编写可以缓慢弹出收缩的层

Javascript: js 创建一个浮动div的代码; javascript下利用数组缓存正则表达式的实现方法; javascript 最常用的10个自定义函数[推荐]; jQuery 常见开发使用技巧总结; 十分钟打造AutoComplete自动完成效果代码; JavaScript 入门基础知识想学习js的朋友可以参考下; javascript 清空form表单中某种元素的值; javascript 格式化时间日期函数代码脚本之家修正版; javascript dom操作之cloneNode文本节点克隆使用技巧; jQuery 动态酷效果实现总结; jQuery中的常用事件总结; 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据; javascript+css 网页每次加载不同样式的实现方法; 向大师们学习Javascript（视频与PPT）; js 实现无干扰阴影效果简单好用（附文件下载）; JavaScript 拾漏补遗; IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点; jQuery的强大选择器小结; jquery $(document).ready() 与window.onload的区别; javascript 动态调整图片尺寸实现代码

No. « ‹ 254 255 256 257 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 64 ::

收藏到网摘: n/a

javascript void(0)的妙用再谈ie和firefox下的document.all属性

前天老师布置了一道思考题，用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 全选提示:你可先修改部分代码,再按运行]

javascript void(0)的妙用再谈ie和firefox下的document.all属性

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

评论 (0) All