资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:主页 > 网页制作 > 正文

div层显示/隐藏的6种常见效果

2018-10-10 10:45 来源:互联网 编辑:admin

div层的显示和隐藏在网页设计中常常被用到,为了让显示/隐藏表现得生动一些,往往加些效果进去,如淡入淡出效果、滚动效果、缩放效果等等。本文将介绍div层显示/隐藏的6种常见效果。

show()

show()是div层显示的最常用到的方法,与之对应的层隐藏的方法则是hide()。jquery实现代码如下:

<script type="text/javascript">
$("#button1").click(function(){
  $("#div1").show();
});

$("#button2").click(function(){
  $("#div1").hide();
});
</script>

代码解释:

button1button2分别是点击按钮的id,div1是div的id。

button1按钮被点击时,div1层便显示;当button2按钮被点击时,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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button1").click(function(){
  $("#div1").show();
});

$("#button2").click(function(){
  $("#div1").hide();
});
</script>
</body>
</html>

show()设置元素从隐藏到完全可见的速度

show()可以设置元素从隐藏到完全可见的速度。默认为 "0"。写法如:show(500),500是表示显示速度为500毫秒。此外,还可以用 "slow"、"normal"、"fast"。

在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

fadeIn()

fadeIn()是用来实现div层显示的淡入效果,与之对应的是fadeOut(),用来实现层的淡出效果。jquery实现代码如下:

<script type="text/javascript">
$("#button5").click(function(){
  $("#div3").fadeIn();
});

$("#button6").click(function(){
  $("#div3").fadeOut();
});
</script>

代码解释:

button5button6分别是点击按钮的id,div3是div的id。

button5按钮被点击时,div3层便淡入显示;当button6按钮被点击时,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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</li>
</ul>
</div>
<script type="text/javascript">
$("#button5").click(function(){
  $("#div3").fadeIn();
});

$("#button6").click(function(){
  $("#div3").fadeOut();
});
</script>
</body>
</html>

fadeIn()设置元素从隐藏到完全可见的淡入速度

fadeIn()可以设置元素从隐藏到完全可见的淡入速度,写法如:fadeIn(500)。默认值为 "normal"。可能的值:毫秒 (比如 1500)、"slow"、"normal"、"fast"。

在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其透明度(这样会创造淡入效果)。

div层其余4种常见显示效果

除了前文提到的两种显示效果外,div层显示还可以有其他几种常见的效果。如:slideDown()slideToggle()fadeToggle()fadeTo()等,这里不再详细讲述,用法其实也跟前文提到的show()fadeIn()一样,大家可以参考下面的实例代码。

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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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;">卡卡测速网 www.webkaka.com</font>
<ul>
<li><b>卡卡网是专业测速网站</b>,内容主要包括<b>网速测试</b>及<b>网站速度测试</b></li>
<li>卡卡网目前在全国60多个省市、美国、澳大利亚、日本、英国等近20个国家地区均设有网速测试点</li>
<li><b>卡卡网提供全球Ping测试</b>,分布全国及全球各地100多个测试点,测试网站连通状况</li>
<li>卡卡网提供网站Tracert路由追踪测试,分布各地100多个测试点,可以测试网站在各地访问的所经路线</li>
<li>卡卡网提供DNS查询功能,一键获知网站在全球的解析情况</li>
<li><b>卡卡网提供网站速度诊断服务</b>,智能分析网站近40项可优化项目,让网站速度立即提升3倍不是梦</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>

execcodegetcode

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

关闭

微信扫一扫

站长微信账号