JS+CSS实现DIV层的展开、收缩效果
本文为大家分享的第一个实例：JS控制DIV层的展开、收缩效果。
<html>
<head>
<title>CSS+JS实现一个DIV层的展开/折叠效果</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCCCCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:256px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //层展开速度
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//层收缩速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='收缩';
}else{
$D2();
sb.innerHTML='展开';
}
}
</script>
</head>
<body>
<div class="class1">
<span id="stateBut" onclick="$use()">收缩</span>
<p id="class1content">我们。
</p>
</div>
</body>
效果图：
第二个实例：js 控制展开折叠
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>Title</title>
</head>
<body>
<!-- js 控制 展开 隐藏div -->
<img src="image/down.png" onclick="test(this)"> <!--this 指 img 对象 -->
<div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
（1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。
（2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写
</div>
</body>
</html>
<script type="text/javascript">
function test(obj){
var div1=document.getElementById("div2");
if(div1.style.display=="block"){
div1.style.display="none";
obj.src="image/up.png";
}else{
div1.style.display="block";
obj.src="image/down.png";
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&
-
JS仿QQ好友列表展开、收缩功能(第二篇)
在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl
-
JS仿QQ好友列表展开、收缩功能(第一篇)
效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <
-
JavaScript设置FieldSet展开与收缩
JavaScript方法代码: 复制代码 代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen
-
JS右下角广告窗口代码(可收缩、展开及关闭)
本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
-
js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu
-
JS实现固定在右下角可展开收缩DIV层的方法
本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
-
JS+CSS实现DIV层的展开、收缩效果
本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,
-
JS实现网页Div层Clone拖拽效果
本文实例讲述了JS实现网页Div层Clone拖拽效果.分享给大家供大家参考.具体如下: 这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
复制代码 代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp
-
JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script> function locking(){ document.all.ly.style.display="block"; document.all.
-
基于jQuery代码实现圆形菜单展开收缩效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c
-
JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC
-
JS+CSS实现的竖向简洁折叠菜单效果代码
本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码.分享给大家供大家参考,具体如下: 这是一款JS+CSS竖向简洁的折叠菜单,支持三级分类,红色垂直型,个人感觉非常棒,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
-
JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单.分享给大家供大家参考.具体如下: 今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-qq-hy-hmd-style-menu-c