快捷導(dǎo)航

JS+CSS實(shí)現(xiàn)DIV層的展開、收縮效果

更新時(shí)間：2016年01月28日 11:00:52 投稿：lijiao

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)DIV層的展開、收縮效果，以兩個(gè)完整實(shí)例介紹了JS控制DIV層的展開、收縮效果，感興趣的小伙伴們可以參考一下

本文為大家分享的第一個(gè)實(shí)例：JS控制DIV層的展開、收縮效果。

<html>
<head>
<title>CSS+JS實(shí)現(xiàn)一個(gè)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>

效果圖：

第二個(gè)實(shí)例：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 對(duì)象 -->

<div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
  （1）每個(gè)HTML標(biāo)記都有事件句柄屬性。onClick是HTML標(biāo)記屬性，不分大小寫。
  （2）HTML標(biāo)記對(duì)應(yīng)的元素對(duì)象也具有事件句柄屬性，這個(gè)屬性必須全小寫，因JS區(qū)分大小寫
</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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js判斷登錄與否并確定跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了js判斷登錄與否并確定跳轉(zhuǎn)頁面的方法,涉及Ajax及session使用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解
這篇文章主要介紹了video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解，主要思路是點(diǎn)擊進(jìn)度條需要獲取拖動(dòng)前的時(shí)間點(diǎn)，具體實(shí)例代碼大家跟隨小編一起看看吧
2018-08-08
select標(biāo)簽設(shè)置默認(rèn)選中的選項(xiàng)方法
下面小編就為大家分享一篇select標(biāo)簽設(shè)置默認(rèn)選中的選項(xiàng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
JS繼承之借用構(gòu)造函數(shù)繼承和組合繼承
這篇文章主要為大家詳細(xì)介紹了JS繼承之借用構(gòu)造函數(shù)繼承和組合繼承，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
js將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法
下面小編就為大家?guī)硪黄猨s將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
uniapp??微信跳轉(zhuǎn)至半屏的使用示例
這篇文章主要介紹了uniapp??微信跳轉(zhuǎn)至半屏的使用示例,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-08-08
JavaScript?邏輯且(&&)和邏輯或(||)的運(yùn)用小結(jié)
這篇文章主要介紹了JavaScript?邏輯且(&&)和邏輯或(||)的妙用?,通過實(shí)例代碼介紹了邏輯且(&&)和邏輯或(||)的詳細(xì)用法，需要的朋友可以參考下
2022-09-09
微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法
這篇文章主要介紹了微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
常見表單重復(fù)提交問題整理及解決方法
常見的重復(fù)提交問題如點(diǎn)擊提交按鈕兩次、點(diǎn)擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下
2013-11-11
使用GPT寫代碼實(shí)現(xiàn)高亮頁面關(guān)鍵字
這篇文章主要為大家介紹了使用GPT寫代碼實(shí)現(xiàn)高亮頁面關(guān)鍵字示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04