PHP实例:美化展开收起效果代码

  • 内容
  • 相关

这代码我是在百度找的代码,然后自己下载研究美化了一下。效果还是蛮好的!

接下来分享一下,顺便自己也当做收藏。以下是实例图片!


HTML代码

<p class="lan"><span style="color:#FFFFFF;font:18px Microsoft YaHei,微软雅黑,Helvetica,Arial,Lucida Grande,Tahoma,sans-serif">展开</span>
<span class="2" style="display:none;">收起</span></p>
 <div class="you">
<p>旭博客—优质建站源码分享|个人建站教程分享|个人情感生活博客</p>
<p>旭博客(xuboke.com)个人情感博客,记录生活点点滴滴,并提供分享建站源码,主题插件破解,个人教程等内容!</p>
</div>

CSS代码

<style type="text/css">
.lan {
	border-radius: 20px;
	padding: 10px;	
	position: relative;
	margin: 5px;
 	box-shadow: 0px 0px 5px 5px rgba(161, 159, 159, 0.1);
	text-align: center;
	background: #03A9F4;
	border: solid 1px #c3c3c3;
}

.you {
	border-radius: 20px;
	padding: 20px;	
	position: relative;
	margin: 5px;
 	box-shadow: 0px 0px 10px 2px #03A9F4;
	text-align: center;
	display: none;
}
</style>

Jquery代码

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".lan").click(function(){
    $(".you").slideToggle("slow");
    $(".xs1").toggle();
    $(".xs2").toggle();
  });});
</script>
以上教程结束,如需套用,自行解决!

本文标签:

版权声明:若无特殊注明,本文皆为《蓝优》原创,转载请保留文章出处。

本文链接:PHP实例:美化展开收起效果代码 - http://xuboke.com/zt/144.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

2条评论
  1. avatar

    九哥 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 Windows 7 回复

    美观,大方。比一个小加号体验更好。

    云南省昭通市 电信

    1. avatar

      boke112导航 Lv.2 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      如果有一个实例或图片看看就更完美了

      广西南宁市西乡塘区 电信

      00:00 / 00:00
      顺序播放