<!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" lang="en" xml:lang="en">
<head>
<title>关闭/展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css" media="screen">
*,html{
margin:0;
padding:0;
}
body {
text-align: center;
margin: 0 auto;
padding: 0;
height: 100%;
color: #0369cb;
font: 76%/1.6em 宋体,Verdana,Tahoma,Arial,sans-serif;
background-color: #efefef;
}
#container {
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
margin-top: 6px;
margin-bottom: 16px;
}
#container a{
position:relative;
text-decoration: none;
bottom:0px;
width:99.9%;
}
#container a:hover {
color: #000000;
text-decoration: none;
}
#box {
display: none;
width: 99.9%;
height:1px;
overflow:hidden;
border: 1px solid #FFF;
background: #000000 url(bg.gif) top left repeat;
filter:alpha(opacity=2);
}
</style>
<script type="text/javascript" language="javascript">
var timer = 10; //计时器时钟
var HeightEnd=400;//Div高度
var aNum = 20; //步进速度
var isOpen = false;//层状态 打开还是关闭 默认关闭
function $(name){return document.getElementById(name);}
function voids() {
setTimeout("extend()",66);
}
// 展开/关闭
function extend(){
var tHeight = parseInt(gs($("box"),"height"));
if(!isOpen){
$("box").style.display="block";
if (tHeight<HeightEnd){
$("box").style.height=(tHeight+aNum)+"px";
$("box").filters.alpha.opacity+=3;
setTimeout("extend()",timer);
}else{
isOpen=true; //打开状态
$("tabTop").innerHTML = "关闭";
$("box").filters.alpha.opacity=100;
}
}else{
if((tHeight-aNum)>0){
$("box").style.height=(tHeight-aNum)+"px";
$("box").filters.alpha.opacity-=5;
setTimeout("extend()",timer);
}else{
isOpen=false; //关闭状态
$("box").style.display="none";
$("tabTop").innerHTML = "展开";
$("box").filters.alpha.opacity=2;
}
}
}
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
</head>
<body>
<div id="container">
<div id="box">
测试..测试
.<br><br>
<p>再次测试..</p>
<p>测试下拉效果</p>
</div>
<a id="tabTop" onfocus="this.blur();" href="javascript:voids('box');">展开</a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>关闭/展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css" media="screen">
*,html{
margin:0;
padding:0;
}
body {
text-align: center;
margin: 0 auto;
padding: 0;
height: 100%;
color: #0369cb;
font: 76%/1.6em 宋体,Verdana,Tahoma,Arial,sans-serif;
background-color: #efefef;
}
#container {
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
margin-top: 6px;
margin-bottom: 16px;
}
#container a{
position:relative;
text-decoration: none;
bottom:0px;
width:99.9%;
}
#container a:hover {
color: #000000;
text-decoration: none;
}
#box {
display: none;
width: 99.9%;
height:1px;
overflow:hidden;
border: 1px solid #FFF;
background: #000000 url(bg.gif) top left repeat;
filter:alpha(opacity=2);
}
</style>
<script type="text/javascript" language="javascript">
var timer = 10; //计时器时钟
var HeightEnd=400;//Div高度
var aNum = 20; //步进速度
var isOpen = false;//层状态 打开还是关闭 默认关闭
function $(name){return document.getElementById(name);}
function voids() {
setTimeout("extend()",66);
}
// 展开/关闭
function extend(){
var tHeight = parseInt(gs($("box"),"height"));
if(!isOpen){
$("box").style.display="block";
if (tHeight<HeightEnd){
$("box").style.height=(tHeight+aNum)+"px";
$("box").filters.alpha.opacity+=3;
setTimeout("extend()",timer);
}else{
isOpen=true; //打开状态
$("tabTop").innerHTML = "关闭";
$("box").filters.alpha.opacity=100;
}
}else{
if((tHeight-aNum)>0){
$("box").style.height=(tHeight-aNum)+"px";
$("box").filters.alpha.opacity-=5;
setTimeout("extend()",timer);
}else{
isOpen=false; //关闭状态
$("box").style.display="none";
$("tabTop").innerHTML = "展开";
$("box").filters.alpha.opacity=2;
}
}
}
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
</head>
<body>
<div id="container">
<div id="box">
测试..测试
.<br><br> <p>再次测试..</p>
<p>测试下拉效果
</p></div>
<a id="tabTop" onfocus="this.blur();" href="javascript:voids('box');">展开</a>
</div>
</body>
</html>
分享到：
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 963db2： select * from tab f ... -
项目总结（Ajax＋Struts＋Spring＋Hiberante＋SQLServer2000） 第一部分 (转载)
2008-03-29 16:49 679总算将一个项目勉强上线，也是第一次我独立完成的这么多任务，框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 791昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 1036往往JSP通常用来动态的生成HTML文件，来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 741在applicationContext.xml中加入如下代码： ... -
简单的JSTL应用（入门）
2008-04-07 19:51 1018需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 696引用：http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证（转载）
2008-04-21 20:11 1519附加功能：登录成功后 ... -
JavaMail
2008-04-30 13:19 654package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 17801、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1242imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7175方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1120<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7104<c:forEach>标签的使 ... -
弹出窗口传值
2008-06-13 09:07 915子窗口中内容： function change(obj){ ... -
Action之间传值
2008-06-13 09:13 868return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 749数据库连接是一种关键的有限的昂贵的资源，这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 437Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 688利用css属性，将form的内部上下左右的填充距离设置为0就好 ... -
实现Web程序的自动登录
2008-06-16 17:13 799...
相关推荐
在我的爱社区网中要显示二级频道,以前用的下拉也不太好看，所以想做个淡入淡出的div 显示，开始只是想实现这个效果，后来干脆就封装成一个方法了，有两种渐变的效果，当然大家也可以拓展，如果有什么问题或好的方法...
《jQuery手机移动端弹窗下拉菜单选择代码详解》 在移动设备上，用户交互体验的优化至关重要，而下拉菜单是网页设计中常见且实用的一种交互元素。jQuery，作为一款强大的JavaScript库，提供了丰富的功能来简化DOM...
这样，用户点击下拉项时，不仅可以看到下拉效果，还能导航到相应的页面。 此外，为了增加视觉吸引力，可以使用CSS添加一些过渡效果和自定义样式，比如改变背景色、边框等。还可以使用jQuery的其他动画方法，如`...
在压缩包中的“缓慢弹出下拉”可能包含实现这一效果的具体代码示例或者更复杂的实现方式，例如使用Bootstrap的模态框（Modal）或者自定义的CSS3动画。如果需要进一步优化，还可以考虑异步加载内容以减少用户等待时间...
本文介绍了如何使用JavaScript实现一个div元素的缓慢收缩与展开效果。此效果通过自定义的JavaScript函数实现，具有实用价值，适用于多种Web开发场景，尤其在用户界面交互设计中较为常见。 知识点主要包括以下几个...
jQuery是一个强大的JavaScript库，它简化了许多DOM操作、事件处理和动画效果，使得创建下拉面板变得更加容易。本教程将通过一个具体的实例，详细介绍如何使用jQuery实现一个简易下拉面板。 首先，我们需要理解...
由于是新的div，初始高度设为0，然后按照`show()`函数的逻辑逐渐增加高度，实现再次下拉的效果。确保这个函数在`hide()`函数执行完毕后才运行，以保证顺序正确。 3. **完整代码分析**： 在提供的代码中，有两个...
`slideToggle()`函数则是jQuery提供的动画方法，它会根据参数（"slow"表示缓慢速度）让选定元素在可见与不可见之间切换，即实现滑动效果。 接下来，我们需要创建HTML结构来构建登录框。登录框通常包括用户名、密码...
下拉菜单可能通过JavaScript与CSS结合实现，使得用户在鼠标悬停时，下拉菜单缓慢滑出，增强用户体验。 3. style3：可能强调响应式设计，使导航条在不同设备上都能良好展示。利用媒体查询(`media queries`)，可以...
点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮，按钮表现发生变化，所以需要给按钮添加mouseover， mouseout事件。要侦听滚动条的变化，所以需要给window添加scroll事件，...
1. **基本原理**：树形下拉框是将传统的下拉框与ZTree（一个JavaScript实现的树形插件）结合，当用户点击下拉按钮时，会展开一个包含层级结构数据的列表供用户选择。 2. **ZTree介绍**：ZTree是一个基于jQuery的树...
- **动态效果**：例如使用JavaScript实现动态下拉菜单等效果，增加网页的互动性和实用性。 ### 知识点五：多媒体元素的应用 项目中提到了使用多种多媒体元素，包括GIF动图、视频、音乐等，这些元素可以显著提升...
- **网页特效**：网页特效是指在网页上实现的各种视觉效果或交互行为，如滚动文字、图片轮播、下拉菜单等，旨在提升用户体验和页面吸引力。 #### 二、ASP特效实例分析 ##### 1. 滚动文字特效 ```html <div align=...
- **动态效果**：例如轮播图、弹出框、下拉菜单等。 - **用户交互**：如表单验证、点击事件处理等。 - **页面跳转**：通过JavaScript实现页面间的平滑过渡。 ### 知识点六：HTML编辑软件的选择 作业指出可以使用...
例如，可以使用`display: flex`来让图标和文本在同一行上对齐，使用`position: relative`和`position: absolute`创建下拉菜单的层级关系。同时，可以使用`:hover`、`:active`和`:focus`伪类来实现鼠标悬停、点击和...
`slowpagescroll`插件是利用JavaScript和jQuery库增强网页滚动体验的一个实例，它通过添加自定义的上拉和下拉箭头，实现了缓慢滚动的效果。这种效果不仅提高了用户的浏览舒适度，也为网页增加了视觉吸引力。同时，这...