`

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

    博客分类：
  • js
DreamweaverJavaScriptjQueryXHTMLCSS 
阅读更多 
<!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
踩
分享到：
| Window 中窗口的层次关系以及窗口的属性
评论
1 楼 foolsheep 2010-01-21  
大赞!!!!
发表评论

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

相关推荐

    div做展开收缩内容效果

    总之，利用jQuery实现`div`元素的展开收缩效果是一种常见的网页交互功能，它可以提高用户的交互体验，使得信息展示更加灵活且易于管理。通过熟练掌握jQuery库和DOM操作，你可以创造出更多丰富的网页动态效果。

    利用Div+CSS自动收缩菜单

    在网页设计中，Div+CSS是一种常见的布局方式，它通过定义HTML中的&lt;div&gt;元素样式来实现页面的结构和样式分离。这种技术对于创建响应式、可定制的网页菜单尤其有用。"利用Div+CSS自动收缩菜单"就是这样一个例子，它...

    JS+CSS实现DIV层的展开、收缩效果

    在网页开发中，动态效果的实现往往能提升用户体验，其中，JS+CSS实现的DIV层的展开和收缩效果就是一个常见的交互设计。这种效果允许用户通过点击按钮或链接来隐藏或显示指定的内容区域，使页面布局更加灵活且富有...

    jQuery 左右2列可收缩的div布局

    在这个"jQuery 左右2列可收缩的div布局"示例中，我们将深入探讨如何使用少量代码实现一个灵活的、响应式的布局，允许用户隐藏或展开左侧栏。 首先，我们来理解基本的布局概念。通常，左右两列布局涉及两个主要部分...

    上下可收缩的div模块

    在网页设计中，创建一个上下可收缩的div模块是一项常见的需求，这通常涉及到JavaScript和jQuery的交互技术。本文将深入探讨如何使用这两种语言来实现这一功能，并提供相关的代码示例和设计技巧。 首先，让我们理解...

    CSS+JS实现一个DIV层的展开折叠效果

    CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...

    Jquery实现div左右上下收缩

    在网页开发中，jQuery 是一个...实际项目中，你可能需要根据具体需求调整代码，比如添加多个收缩效果，或者根据不同的触发条件执行不同的收缩动作。通过深入学习 jQuery 和 CSS，你可以创造出更复杂的交互式用户体验。

    div+css+jquery左右分栏可收缩仿框架

    在这个框架中，CSS可能被用来设置div的宽度、间距、位置以及实现左右栏的对齐和收缩效果。 3. **jQuery**：jQuery库提供了便利的API，简化了DOM操作，如元素的选择、属性的修改和事件的绑定。在左右分栏收缩功能中...

    JQ做的DIV展开收缩代码

    手风琴效果是一种常见的交互设计，它允许用户逐个展开或收缩内容区域，以节省页面空间并提高用户体验。 首先，让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理...

    左右2列可收缩的布局效果

    在网页设计中，实现“左右2列可收缩的布局效果”是一种常见的需求，尤其是在响应式设计中，这种布局能够提供良好的用户体验，适应不同设备的屏幕尺寸。本文将深入探讨这一主题，结合弹性布局（Flexbox）的概念，详细...

    layui侧边收缩菜单

    layui是一款流行的前端UI框架，它提供了丰富的组件和样式，用于构建现代、响应式的Web应用。在layui中，侧边收缩菜单是一项重要的功能，它能够帮助优化网页布局，提高用户体验。当我们点击图标时，菜单可以进行收缩...

    漂亮的菜单效果（div+css）

    本资源提供的"漂亮的菜单效果（div+css）"旨在展示如何利用HTML的`&lt;div&gt;`元素和CSS（层叠样式表）来创建吸引人的、交互式的菜单。下面将详细介绍这些知识点。 首先，`&lt;div&gt;`元素是HTML中的一个块级元素，通常用于...

    左侧隐藏div，点击按钮弹出

    接下来，CSS（如contactable.css）用于设置div的样式和隐藏效果。`display:none;`属性使得div在页面加载时不显示。可以为div和按钮添加其他样式以增强视觉效果： ```css #hiddenDiv { width: 300px; background-...

    JS显示隐藏DIV(动画效果)

    在网页开发中，JavaScript（JS...总结，JavaScript显示隐藏DIV的动画效果涉及到DOM操作、CSS样式控制、定时器函数以及可能的浏览器兼容性处理。这种技术在现代网页设计中广泛使用，可以显著提升用户与网页的互动体验。

    js实现div层缓慢收缩与展开的方法

    在JavaScript中，实现一个div层缓慢收缩与展开的效果通常涉及到DOM操作、事件处理以及定时器的使用。这个实例中，我们看到的是一个简单的JavaScript代码，它通过监听用户的点击事件来改变div元素的高度，从而实现层...

    div+css 三级导航

    综上所述，制作“div+css 三级导航”需要掌握HTML的布局元素（如 `div`）和CSS的样式控制技巧，包括定位、层级管理和交互效果实现。通过实践和理解这些知识点，你将能够创建出既美观又实用的网页导航菜单，提升网站...

    网站后台页面左侧收缩折叠效果.zip

    这种“网站后台页面左侧收缩折叠效果”是一种常见的交互设计，它利用JavaScript（JS）技术来增强用户体验。通过点击一个小箭头图标，左侧的导航菜单会收合起来，为主要内容区域腾出更多空间，同时也使得页面布局更加...

    收缩式导航菜单(CSS+DIV)

    "收缩式导航菜单"是一种常见的交互设计模式，特别是在移动设备上，它可以节省屏幕空间，提高用户体验。这种菜单在未展开时通常只显示主要的导航选项，当用户点击时会展示更多子级菜单项。在本案例中，我们将深入探讨...

    滑动层收缩效果

    标题中的“滑动层收缩效果”指的是在网页设计或移动应用开发中常见的一种交互效果，通常用于导航菜单、侧边栏或任何可扩展和收缩的内容区域。这种效果允许用户通过滑动或点击来展开和收起内容，提高用户体验并节省...

    本人收集的近50种伸缩滑动折叠菜单(js、css、div实现)

    特别是CSS3的过渡和动画属性，可以实现平滑的展开和收缩效果。同时，CSS的媒体查询（Media Queries）还可以确保菜单在不同设备和屏幕尺寸上的响应式布局。 3. div元素：在HTML中，div是用于分组其他HTML元素的容器...

Magicbox
Global site tag (gtag.js) - Google Analytics