color code

color code

#color code#color

color code

color code

auto-resize a img fit into div

auto-resize a img fit into div

<div id="id15424" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzu6Uujzf50jYBOZcNAmd2fvNHwpnixIS7tLOXGw90X0oYXsBZZMSrgRyJ34jLISlfxP5DKudXDIJ-7n-g_FAtVzzKbpoqFsH5OdPZ23iC22GWE6k4-ug8pWrnvM7G8AGKMudXJahUCWb/s320/20190213_Jenny_60age_015.jpg" width="auto" height="aoto" /> </div> <style type="text/css"> #id15424{ position: relative; width:100%; height:100%; background-color: #888;} #id15424 img{border: 10px solid white; max-height: 80%; max-width: 80%; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; } </style>

00

div background

DIV 內置入 jpg 圖片

底圖就會依照 DIV 區塊的大小，等比縮放到區塊中。
用 CCS background-image: center，background-repeat: no-repeat 完成。

<style type="text/css">
.a17524{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg");
-moz-background-size: contain;     /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain;         /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center;         /*置中*/
background-repeat: no-repeat;     /*背景圖案不重複*/
border:2px solid #000000;            /*邊框樣式與顏色*/
background-color:#CCCCCC;      /*背景的顏色*/
color: fuchsia ;
font-size: 20px ;
}
</style>


範例的效果 :

<div class="a17524" style="height: 150px; width: 400px;">

<div class="a17524" style="height: 320px; width: 600px;">

<textarea class="a17524" style="height: 320px; width: 600px;"></textarea>

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center><div id="buttom_id"><input type="button" class="Bittom"value="blind" /><input type="button" class="Bittom" value="bounce" /><input type="button" class="Bittom" value="clip" /><input type="button" class="Bittom" value="drop" /><input type="button" class="Bittom" value="explode" /><input type="button" class="Bittom" value="fold" /><br /><input type="button" class="Bittom" value="highlight" /><input type="button" class="Bittom" value="puff" /><input type="button" class="Bittom" value="pulsate" /><input type="button" class="Bittom" value="scale" /><input type="button" class="Bittom" value="shake" /><input type="button" class="Bittom" value="size"><input type="button" class="Bittom" value="slide" /><br /><img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg" /></center></div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style>#Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div><div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center> <div id="buttom_id"> <input type="button" class="Bittom"value="blind" /> <input type="button" class="Bittom" value="bounce" /> <input type="button" class="Bittom" value="clip" /> <input type="button" class="Bittom" value="drop" /> <input type="button" class="Bittom" value="explode" /> <input type="button" class="Bittom" value="fold" /> <br /> <input type="button" class="Bittom" value="highlight" /> <input type="button" class="Bittom" value="puff" /> <input type="button" class="Bittom" value="pulsate" /> <input type="button" class="Bittom" value="scale" /> <input type="button" class="Bittom" value="shake" /> <input type="button" class="Bittom" value="size"> <input type="button" class="Bittom" value="slide" /> <br /> <img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg" /> </center> </div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style> #Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div> <div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00