|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
div層顯示/隱藏的6種常見效果
作者:admin 時(shí)間:2018-2-27 20:49:28 瀏覽:div層的顯示和隱藏在網(wǎng)頁設(shè)計(jì)中常常被用到，為了讓顯示/隱藏表現(xiàn)得生動(dòng)一些，往往加些效果進(jìn)去，如淡入淡出效果、滾動(dòng)效果、縮放效果等等。本文將介紹div層顯示/隱藏的6種常見效果。
show()
show()是div層顯示的最常用到的方法，與之對(duì)應(yīng)的層隱藏的方法則是hide()。jquery實(shí)現(xiàn)代碼如下：
<script type="text/javascript">
$("#button1").click(function(){
$("#div1").show();
});
$("#button2").click(function(){
$("#div1").hide();
});
</script>
代碼解釋：
button1和button2分別是點(diǎn)擊按鈕的id，div1是div的id。
當(dāng)button1按鈕被點(diǎn)擊時(shí)，div1層便顯示；當(dāng)button2按鈕被點(diǎn)擊時(shí)，div1層便隱藏。
效果演示
html代碼
<html>
<head>
<title>jquery show()</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p><input id="button1" type="button" value="顯示div" /> <input id="button2" type="button" value="隱藏div" /></p>
<div id="div1" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button1").click(function(){
$("#div1").show();
});
$("#button2").click(function(){
$("#div1").hide();
});
</script>
</body>
</html>
show()設(shè)置元素從隱藏到完全可見的速度
show()可以設(shè)置元素從隱藏到完全可見的速度。默認(rèn)為 "0"。寫法如：show(500)，500是表示顯示速度為500毫秒。此外，還可以用 "slow"、"normal"、"fast"。
在設(shè)置速度的情況下，元素從隱藏到完全可見的過程中，會(huì)逐漸地改變其高度、寬度、外邊距、內(nèi)邊距和透明度。
fadeIn()
fadeIn()是用來實(shí)現(xiàn)div層顯示的淡入效果，與之對(duì)應(yīng)的是fadeOut()，用來實(shí)現(xiàn)層的淡出效果。jquery實(shí)現(xiàn)代碼如下：
<script type="text/javascript">
$("#button5").click(function(){
$("#div3").fadeIn();
});
$("#button6").click(function(){
$("#div3").fadeOut();
});
</script>
代碼解釋：
button5和button6分別是點(diǎn)擊按鈕的id，div3是div的id。
當(dāng)button5按鈕被點(diǎn)擊時(shí)，div3層便淡入顯示；當(dāng)button6按鈕被點(diǎn)擊時(shí)，div3層便淡出隱藏。
效果演示
html代碼
<html>
<head>
<title>jquery show()</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p><input id="button5" type="button" value="顯示div" /> <input id="button6" type="button" value="隱藏div" /></p>
<div id="div3" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button5").click(function(){
$("#div3").fadeIn();
});
$("#button6").click(function(){
$("#div3").fadeOut();
});
</script>
</body>
</html>
fadeIn()設(shè)置元素從隱藏到完全可見的淡入速度
fadeIn()可以設(shè)置元素從隱藏到完全可見的淡入速度，寫法如：fadeIn(500)。默認(rèn)值為 "normal"?？赡艿闹担?strong>毫秒 （比如 1500）、"slow"、"normal"、"fast"。
在設(shè)置速度的情況下，元素從隱藏到可見的過程中，會(huì)逐漸地改變其透明度（這樣會(huì)創(chuàng)造淡入效果）。
div層其余4種常見顯示效果
除了前文提到的兩種顯示效果外，div層顯示還可以有其他幾種常見的效果。如：slideDown()、slideToggle()、fadeToggle()、fadeTo()等，這里不再詳細(xì)講述，用法其實(shí)也跟前文提到的show()和fadeIn()一樣，大家可以參考下面的實(shí)例代碼。
html代碼
<html>
<head>
<title>jquery show()</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--------------------------------------- show() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show()</div></p>
<p><input id="button1" type="button" value="顯示div" /> <input id="button2" type="button" value="隱藏div" /></p>
<div id="div1" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button1").click(function(){
$("#div1").show();
});
$("#button2").click(function(){
$("#div1").hide();
});
</script>
<!--------------------------------------- show(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show(500)</div></p>
<p><input id="button3" type="button" value="顯示div" /> <input id="button4" type="button" value="隱藏div" /></p>
<div id="div2" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button3").click(function(){
$("#div2").show(500);
});
$("#button4").click(function(){
$("#div2").hide(500);
});
</script>
<!--------------------------------------- fadeIn() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn()</div></p>
<p><input id="button5" type="button" value="顯示div" /> <input id="button6" type="button" value="隱藏div" /></p>
<div id="div3" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button5").click(function(){
$("#div3").fadeIn();
});
$("#button6").click(function(){
$("#div3").fadeOut();
});
</script>
<!--------------------------------------- fadeIn(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn(500)</div></p>
<p><input id="button7" type="button" value="顯示div" /> <input id="button8" type="button" value="隱藏div" /></p>
<div id="div4" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button7").click(function(){
$("#div4").fadeIn(500);
});
$("#button8").click(function(){
$("#div4").fadeOut(500);
});
</script>
<!--------------------------------------- slideDown() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown()</div></p>
<p><input id="button9" type="button" value="顯示div" /> <input id="button10" type="button" value="隱藏div" /></p>
<div id="div5" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button9").click(function(){
$("#div5").slideDown();
});
$("#button10").click(function(){
$("#div5").slideUp();
});
</script>
<!--------------------------------------- slideDown(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown(500)</div></p>
<p><input id="button11" type="button" value="顯示div" /> <input id="button12" type="button" value="隱藏div" /></p>
<div id="div6" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button11").click(function(){
$("#div6").slideDown(500);
});
$("#button12").click(function(){
$("#div6").slideUp(500);
});
</script>
<!--------------------------------------- slideToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle()</div></p>
<p><input id="button13" type="button" value="顯示/隱藏div" /></p>
<div id="div7" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button13").click(function(){
$("#div7").slideToggle();
});
</script>
<!--------------------------------------- slideToggle(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle(500)</div></p>
<p><input id="button14" type="button" value="顯示/隱藏div" /></p>
<div id="div8" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button14").click(function(){
$("#div8").slideToggle(500);
});
</script>
<!--------------------------------------- fadeToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeToggle()</div></p>
<p><input id="button15" type="button" value="顯示/隱藏div" /></p>
<div id="div9" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button15").click(function(){
$("#div9").fadeToggle();
});
</script>
<!--------------------------------------- fadeTo() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeTo()</div></p>
<p><input id="button16" type="button" value="顯示div" /> <input id="button17" type="button" value="隱藏div" /></p>
<div id="div10" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測(cè)速網(wǎng) howtostagehomes.com</font>
<ul>
<li><b>卡卡網(wǎng)是專業(yè)測(cè)速網(wǎng)站</b>，內(nèi)容主要包括<b>網(wǎng)速測(cè)試</b>及<b>網(wǎng)站速度測(cè)試</b></li>
<li>卡卡網(wǎng)目前在全國(guó)60多個(gè)省市、美國(guó)、澳大利亞、日本、英國(guó)等近20個(gè)國(guó)家地區(qū)均設(shè)有網(wǎng)速測(cè)試點(diǎn)</li>
<li><b>卡卡網(wǎng)提供全球Ping測(cè)試</b>，分布全國(guó)及全球各地100多個(gè)測(cè)試點(diǎn)，測(cè)試網(wǎng)站連通狀況</li>
<li>卡卡網(wǎng)提供網(wǎng)站Tracert路由追蹤測(cè)試，分布各地100多個(gè)測(cè)試點(diǎn)，可以測(cè)試網(wǎng)站在各地訪問的所經(jīng)路線</li>
<li>卡卡網(wǎng)提供DNS查詢功能，一鍵獲知網(wǎng)站在全球的解析情況</li>
<li><b>卡卡網(wǎng)提供網(wǎng)站速度診斷服務(wù)</b>，智能分析網(wǎng)站近40項(xiàng)可優(yōu)化項(xiàng)目，讓網(wǎng)站速度立即提升3倍不是夢(mèng)</li>
</ul>
</div>
<script type="text/javascript">
$("#button16").click(function(){
$("#div10").fadeTo("slow",0.15);
});
$("#button17").click(function(){
$("#div10").fadeOut();
});
</script>
<p style="height:500px;width:100%"></p>
</body>
</html>
- 項(xiàng)目列舉 li 換行文字左邊不對(duì)齊【已解決】
- CSS的odd和even屬性實(shí)現(xiàn)table表格tr單雙行顏色相間而不同
- 純css實(shí)現(xiàn)的table表格樣式，教程站常用
- 怎樣去掉a標(biāo)簽點(diǎn)擊時(shí)的虛線邊框
- css實(shí)現(xiàn)漂亮的checkbox多選框和radio單選按鈕
- css實(shí)現(xiàn)漂亮的下拉菜單，簡(jiǎn)單方便實(shí)用
- 如何讓某一DIV層顯示在上面？z-index解決問題
- 純CSS實(shí)現(xiàn)圓角樣式的4種寫法，比CSS3兼容性更好
- 【css3動(dòng)畫】圓波擴(kuò)散效果
- css背景圖實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)
- css實(shí)現(xiàn)div或table居中，文字不居中【Chrome/Firefox/IE測(cè)試通過】
- 【2個(gè)實(shí)例】教你怎樣修改和美化blockquote雙引號(hào)及css樣式
- 3個(gè)Blockquote的css樣式【css3實(shí)現(xiàn)】
- 5個(gè)Blockquote的css樣式
- css實(shí)現(xiàn)超出div長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示
- 站長(zhǎng)推薦
