JavaScript動畫方式控制div元素的隱藏和顯示
jQuery實現此功能相對比較簡單,具體參閱點選按鈕動畫方式隱藏和顯示div一章節。
結合CSS3實現此功能也非常便利和適合,具體參閱JavaScript與CSS3動畫方式改變元素尺寸一章節。
原生JavaScript實現稍顯麻煩,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:200px; background-color:green; } </style> <script> window.onload=function(){ var speed=5; var odiv=document.getElementById("antzone"); var obt=document.getElementById("bt"); obt.onclick=function(){ if(odiv.style.display=="block"){ var timer=setInterval(function(){ if(parseInt(odiv.style.height)>0){ var H=parseInt(odiv.style.height); H=H-speed; odiv.style.height=H+"px"; } else{ odiv.style.display="none"; obt.value="點選顯示"; clearInterval(timer); } },50) }else{ var timer=setInterval(function(){ if(parseInt(odiv.style.height)<100){ odiv.style.display="block"; var H=parseInt(odiv.style.height); H=H+speed; odiv.style.height=H+"px"; }else{ obt.value="點選隱藏"; clearInterval(timer); } },50) } } } </script> </head> <body> <div id="antzone" style="display:block;height:100px;"></div> <input type="button" id="bt" value="點選隱藏"/> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var speed=5,設定高度調整的幅度。
(3).var odiv=document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
(4).var obt=document.getElementById("bt"),獲取按鈕元素物件。
(5).obt.onclick=function(){},為按鈕註冊onclick事件處理函式。
(6).if(odiv.style.display=="block"){},判斷元素是否處於顯示狀態。
(7).var timer=setInterval(function(){
if(parseInt(odiv.style.height)>0){
var H=parseInt(odiv.style.height);
H=H-speed;
odiv.style.height=H+"px";
}else{
odiv.style.display="none";
obt.value="點選顯示";
clearInterval(timer);
}
},50),使用定時器函式不斷的設定元素的高度。
odiv.style.height獲取的是一個字串,並且帶有單位,所以必須使用parseInt()轉換一下。
二.相關閱讀:
(1).setInterval()方法參閱setInterval()一章節。
(2).parseInt()方法參閱JavaScript parseInt()一章節。
(3).clearInterval()方法參閱window.clearInterval()一章節。
相關文章
- 點選按鈕動畫方式隱藏和顯示div動畫
- javascript隱藏和顯示div的方法JavaScript
- javascript動態設定div的顯示和隱藏JavaScript
- JavaScript點選切換div的顯示和隱藏JavaScript
- 用js控制div的顯示與隱藏JS
- JavaScript 設定div顯示與隱藏JavaScript
- jQuery控制div顯示和隱藏程式碼例項jQuery
- 教你三種jQuery框架實現元素顯示及隱藏動畫方式jQuery框架動畫
- JavaScript 點選一個按鈕 div的隱藏和顯示JavaScript
- JavaScript點選一個按鈕隱藏和顯示divJavaScript
- # Flutter控制元件的顯示和隱藏的三種方式Flutter控制元件
- CSS點選隱藏和顯示div效果CSS
- 動態控制C4C UI元素的顯示和隱藏UI
- jquery點選按鈕顯示和隱藏DIvjQuery
- JavaScript側邊欄顯示和隱藏JavaScript
- javaScript顯示和隱藏(display屬性)JavaScript
- jQuery動畫的顯示與隱藏效果jQuery動畫
- jQuery動畫的顯示與隱藏效果!jQuery動畫
- 點選按鈕實現div的顯示和隱藏
- div的顯示和隱藏切換程式碼例項
- 元素的隱藏和顯示(display ,visibility ,overflow)
- jQuery實現的點選元素隱藏和顯示jQuery
- js下拉框實現div顯示和隱藏JS
- js設定元素控制元件顯示和隱藏程式碼例項JS控制元件
- view的隱藏和顯示View
- 如何在fragment中控制DrawerLayout的顯示和隱藏Fragment
- js動態控制表單的顯示和隱藏JS
- jquery使用一個按鈕實現控制元素的顯示與隱藏jQuery
- MacOS X隱藏和顯示隱藏檔案Mac
- Mac顯示和隱藏“隱藏檔案”命令Mac
- jQuery隱藏一個div元素jQuery
- 使用 hide和 show方法來隱藏和顯示 HTML 元素IDEHTML
- Mac下顯示和隱藏隱藏檔案的命令Mac
- jQuery 效果 – 隱藏和顯示jQuery
- MAC如何顯示隱藏檔案和隱藏隱藏檔案的命令Mac
- js實現的點選一個div顯示,其他div隱藏效果JS
- 使用jQuery控制table表格的tr行顯示和隱藏效果jQuery
- visibility和display設定元素的顯示和隱藏的區別