欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純css3顯示隱藏一個(gè)div特效的具體實(shí)現(xiàn)

  發(fā)布時(shí)間：2014-02-10 16:25:02   作者：佚名   我要評論
顯示隱藏一個(gè)div特效的方法有很多，下為大家介紹下使用純css3是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下

復(fù)制代碼
代碼如下:

<!DOCTYPE HTML>
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>
#showDiv {
background-color:red;
width:300px;
height:300px;
display:none;
}
.from-below,
.from-below-to-below .effeckt-modal {
-webkit-transform: translateX(100%);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-transition: all 500ms;
-o-transition: 500ms;
transition: 500ms;
}
.effeckt-show,
.effeckt-show.from-below-to-below .effeckt-modal {
-webkit-transform: translateX(0);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.effeckt-show .effeckt-modal {
visibility: visible;
}
</style>
<script>
function show(){
$("#showDiv").show();
$("#showDiv").addClass("from-below");
setTimeout(function(){$("#showDiv").addClass("effeckt-show");},300);
}
function hide(){
$("#showDiv").removeClass("effeckt-show");
}
</script>
</head>
<body class="sapUiBody">
<input type="button" id="bt" value="show" onClick="show()">
<input type="button" id="bt" value="hide" onClick="hide()">
<div id="showDiv" class="">
<h1>aaaaa</h1>
</div>
</body>

相關(guān)文章

  • div居中顯示的css樣式代碼

    div居中的使用還是比較廣泛的，在本文有個(gè)不錯(cuò)的示例，可以幫助大家更好的理解div居中顯示，感興趣的朋友不要錯(cuò)過
    2013-10-05

  • CSS設(shè)置DIV背景色漸變顯示兼容IE/火狐/谷歌

    DIV背景色漸變在以前的文章中也有介紹過，但并沒有同時(shí)兼容IE、火狐、谷歌，而本文的這個(gè)示例卻可以同時(shí)兼容，建議喜歡的朋友參考下
    2013-09-30

  • CSS實(shí)現(xiàn)帶箭頭的DIV(鼠標(biāo)放上顯示提示框)

    畢業(yè)設(shè)計(jì)要做一個(gè)提示框：當(dāng)鼠標(biāo)放在某個(gè)鏈接上時(shí)，下邊顯示有提示功能的窗體，于是有了以下的構(gòu)思，有類似需求的朋友可以參考下哈，希望本例對你有所幫助
    2013-04-12

  • 純css3實(shí)現(xiàn)無圖片的div高亮顯示特效

    純css3實(shí)現(xiàn)的div高亮顯示效果，無圖片，當(dāng)鼠標(biāo)放上去是會突出高亮顯示
    2013-02-27

  • css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)

    css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能，當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí)，會自動(dòng)出現(xiàn)滾動(dòng)條，這一點(diǎn)還是比較有利于用戶體驗(yàn)的，本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方
    2013-01-25

  • css布局實(shí)例:網(wǎng)頁布局的方法

    　　許多網(wǎng)頁設(shè)計(jì)師都喜歡，將兩個(gè)或者多個(gè)容器等高的并排放置，并在里面展示每個(gè)容器的內(nèi)容，就象經(jīng)典表格布局中的單元格控制幾個(gè)欄目的位置
    2008-10-17

  • div 超出隱藏 文字超出div部分隱藏css代碼

    未隱藏之前與隱藏之后的效果顯而易見，在版面的美觀度上起到一定的作用，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對你有所幫助
    2013-05-21

  • html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式

    突然想起幾年前用過的一個(gè)隱藏樣式代碼，有些時(shí)候用它非常方便，比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到，那就加上他，嘿嘿，就隱身了,需要的朋友可以了解下
    2012-12-21

  • CSS控制DIV層顯示和隱藏的實(shí)現(xiàn)方法

    本文給大家?guī)砹薈SS控制DIV層顯示和隱藏的方法，是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的小伙伴一起學(xué)習(xí)吧
    2016-07-01

最新評論