DIV三种不同的收缩样式效果

starting

浏览: 194648 次
性别:
来自: 深圳

最近访客更多访客>>

dxr19870317

xtfgq

crest868

ws110d

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Dreamweaver JavaScript jQuery XHTML CSS

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:258px;
	top:16px;
	width:243px;
	height:223px;
	z-index:1;
	border:#00CCFF solid 1px;
	background:#FFC488;
}
-->
</style>
<script type="text/javascript" language="Javascript" src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var _divShowTimer;//20000
var _divObj;
var divHeight;
var divWidth;

function showDiv(divId,_sType,_time){	
	 _divObj=document.getElementById(divId);
	if(!_divObj)return;
	if(!_sType){
		if(_divObj.style.display==""){
		_divObj.style.display="none";
		}else{
			_divObj.style.display="";
		}
		return;
	}
	 if(!_time)_time=500;
	//gpsPlayerTimer = setInterval("gpsTrack2()", 300);	
	if(_sType=="1"){//竖直逐渐张开或收缩
		if(_divObj.style.display!="none"){
			divHeight=_divObj.clientHeight;			
			_divShowTimer = setInterval("displaySTyle1('none')", 5);
		}else{
			_divShowTimer = setInterval("displaySTyle1('')", 5);
		}
	}else if(_sType=="2"){			//由角落逐渐张开或收缩
		if(_divObj.style.display==""){
			divHeight=_divObj.clientHeight;	
			divWidth=_divObj.clientWidth;		
			_divShowTimer = setInterval("displaySTyle2('none')",5);
		}else{
			_divShowTimer = setInterval("displaySTyle2('')",5);
		}
	}else if(_sType=="3"){	//由角落逐渐张开或收,且颜色慢慢变淡
		//$d.toggle("slow");  //("slow", "normal",  "fast")，hide("slow")隐藏 ,show("slow")显示
		$(_divObj).toggle(_time);
	}else if(_sType=="4"){
	
	}else if(_sType=="5"){
	}else if(_sType=="6"){
	}else if(_sType=="7"){		
	}
}
function displaySTyle1(_diSty){	
	try{
		if(_diSty=="none"){
			_divObj.style.height=_divObj.clientHeight-5+"px";
			if(_divObj.clientHeight==3){
				_divObj.style.display="none";
				clearInterval(_divShowTimer);//清除计时器
				return;
			}
		}else if(_diSty==""){
			_divObj.style.height=_divObj.clientHeight+5+"px";
			_divObj.style.display="";
			_divSH=parseInt(_divObj.style.height);
			if(_divSH==divHeight){
				clearInterval(_divShowTimer);//清除计时器
				return;
			}			
		}		
	}catch(err){}	
}
function displaySTyle2(_diSty){	
	try{
		if(_diSty=="none"){
			_divObj.style.height=_divObj.clientHeight-5+"px";
			_divObj.style.width=_divObj.clientWidth-5+"px";
			if(_divObj.clientHeight==3){
				_divObj.style.display="none";
				clearInterval(_divShowTimer);//清除计时器
				return;
			}
		}else if(_diSty==""){
			_divObj.style.height=_divObj.clientHeight+5+"px";
			_divObj.style.width=_divObj.clientWidth+5+"px";
			_divObj.style.display="";
			_divSH=parseInt(_divObj.style.height);
			if(_divSH==divHeight){
				_divObj.style.width=divWidth;
				clearInterval(_divShowTimer);//清除计时器
				return;
			}			
		}		
	}catch(err){}	
}

function displaySTyle3(){	
	var $d=$(_divObj)
	$d.toggle("slow");  //("slow", "normal",  "fast")，hide("slow")隐藏 ,show("slow")显示


}
</SCRIPT>
</head>

<body>

<div id="Layer1">
	
</div>
<input type="button" name="Submit" value="1"  onclick="showDiv('Layer1','1')" />
<input type="button" name="Submit" value="2"  onclick="showDiv('Layer1','2')" />
<input type="button" name="Submit" value="3"  onclick="showDiv('Layer1','3',700)" />
<input type="button" name="Submit" value="4"  onclick="showDiv('Layer1','4')" />
<input type="button" name="Submit" value="5"  onclick="showDiv('Layer1','5')" />
<input type="button" name="Submit" value="6"  onclick="showDiv('Layer1','6')" />
<input type="button" name="Submit" value="7"  onclick="showDiv('Layer1','7')" />
</body>
</html>

该样式主要有三种：一、竖直逐渐张开或收缩，二、由角落逐渐张开或收缩三、由角落逐渐张开或收,且颜色慢慢变淡

把该代码拷贝到dreamweaver运行即可看到效果

3
顶

0
踩

分享到：

IE,FF兼容的鼠标移动样式转换 | Window 中窗口的层次关系以及窗口的属性

2009-02-20 17:48
浏览 3644
评论(1)
分类:非技术
查看更多

1 楼 foolsheep 2010-01-21

大赞!!!!

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV三种不同的收缩样式效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV三种不同的收缩样式效果

评论

发表评论

相关推荐

转载：WdatePicker日历控件使用方法

设置输入框只能输入数字和逗号

使用json-lib JSONObject JSONArray

js封装hashMap并调用

Jquery初步学习

Microsoft.AlphaImageLoader滤镜讲解,jsp显示本地图片

js设置select

JSON實例

学习正则表达式

JS实现div圆弧

js实例讲解this用法

position:absolute relative 得到一个对象的top和left

js中top,left,height,width相关参数的解析和实例

firefox、IE下的几个不同属性的方法调用

任何对象的top和left

IE,FF兼容的鼠标移动样式转换

Window 中窗口的层次关系以及窗口的属性

动态添加删除table

几种开源的AJAX框架（jQuery,Mootools,Dojo,Ext JS等等） 比较

jquery跳出each循环

最近访客更多访客>>

几种开源的AJAX框架（jQuery,Mootools,Dojo,Ext JS等等）比较