jquery酷炫的产品树形介绍页特效

这是一款很酷炫的jquery产品树形介绍页特效，鼠标滑过每个菜单时，菜单掉落并出现圆形的菜单介绍内容，滑过下一个菜单时，显示新菜单内容并讲上一个菜单恢复原味，动画效果真的很棒。

分类：图片代码 > 鼠标滑过难易：初级

查看演示下载资源下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

开头部分需要引入CSS样式，jquery库和index.js插件，引用内容不算多：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/index.js"></script>

body部分的基本都是常见元素的布局规格，部分代码如下：

<div class="col foo-title" style="width: 66px; height: 66px; opacity: 1; margin-top: 0px; margin-left: 0px; border-top-left-radius: 135px; border-top-right-radius: 135px; border-bottom-right-radius: 135px; border-bottom-left-radius: 135px; font-size: 17px;"> 色泽 </div>
<div class="cate_content cate_col" style="display: none;">
  <p class="ptit"> 色泽 </p>
  <p class="p3"> 大红灯 </p>
  <p class="p3"> 果皮亮红色 </p>
  <p class="p4"></p>
  <p class="p3"> <strong>美早</strong> </p>
  <p class="p3"> <strong>果皮深紫红色</strong> </p>
  <p class="p5"></p>
</div>

底部调用一下函数即可：

$(function () {
	$.fooTree();
});