基于jquery实现产品树形介绍页特效



33 130 44



特效描述:基于jquery实现 产品树形 介绍页,基于jquery实现产品树形介绍页特效

代码结构

1. 引入JS

<script type="text/javascript" src="Js/jquery-1.10.2.min.js"></script>
<script src="Js/index.js"></script>
<script src="Js/scollIt.js"></script>

2. HTML代码

<div class="index_tree">
        <div class="contain">
            <p class="tit">
                果来果趣 果实属性标签之大樱桃篇 Code by P丶
            </p>
            <ul class="category">
                <li>
                    <div class="taste foo-title" style="width: 54px; height: 54px; 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: 16px;">
                        口感
                    </div>
                    <div class="cate_content cate_taste" style="display: none;">
                        <p class="ptit">
                            口感
                        </p>
                        <p class="p1">
                            大红灯:果肉较硬,淡黄色,肉嫩多汁,酸甜适口(略偏酸)
                        </p>
                        <p class="p1">
                            美早:肉质脆而不软,肥厚多汁,口味甜酸(偏甜)。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="cate 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_cate" style="display: none;">
                        <p class="ptit">
                            品种
                        </p>
                        <div class="cate_cate_img">
                            <div>
                                <img class="fl" src="images/tree_cate_hongdeng.jpg">
                                <div class="fr">
                                    <p>
                                        <strong>大红灯</strong>
                                    </p>
                                    <p>
                                        果型肾脏形,肉质肥厚,果柄粗短;外观美
                                    </p>
                                </div>
                            </div>
                            <div>
                                <img class="fl" src="images/tree_cate_meizao.jpg">
                                <div class="fr">
                                    <p>
                                        <strong>美早</strong>
                                    </p>
                                    <p>
                                        果型心形,个大而整齐,顶端稍平,果柄极其短粗。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="nutrition foo-title" style="width: 52px; height: 52px; 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: 16px;">
                        营养
                    </div>
                    <div class="cate_content cate_nutrition" style="display:none;">
                        <p class="ptit">
                            营养
                        </p>
                        <p class="p1">
                            —每百克鲜果肉中,含碳水化合物8克,蛋白质1.2克,钙6毫克,磷3 毫克,铁5.9毫克(水果首位),以及多种维生素。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="grow 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_grow" style="display: none;">
                        <p class="ptit">
                            栽培
                        </p>
                        <p class="p1">
                            果来果趣"品牌大樱桃栽培标准
                        </p>
                        <p>
                            果来果趣"品牌大樱桃的栽培是由专业的果蔬种植专家根据气候、土壤、阳光、水量等实际情况,为"果来果趣"量身定制的最专业、最合适的大樱桃栽培解决方案:ph~6.3的中性沙壤土,加密排水沟,树行间距40米,树坑深75cm、宽95cm,株行距3×4米,自由纺缍形树形管理,秋季9月平整地,以农家土杂肥为主的定时定量的科学施肥策略,不洒农药,定期浇水5次/年,人工授粉与放蜂授粉相结合。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="add foo-title" style="width: 62px; height: 62px; 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_add" style="display: none;">
                        <p class="ptit">
                            果源
                        </p>
                        <p class="p1">
                            烟台福山"果来果趣"大樱桃基地
                        </p>
                        <p>
                            果来果趣"的大樱桃种植基地位于烟台市福山区,真正的做到原产地直供。福山区大樱桃现有面积10万余亩,占全国栽植面积的40%;产量1600万公斤,占全国的60%。全国面积最大、产量最高、品质最优的大樱桃商品基地。1996年中国农业特产命名委员会授予福山区"中国大樱桃之乡"称号;1997年和1999年福山大樱桃连续荣获"中国名牌产品"称号;2003年被中国优质农产品开发服务协会授予"中国大樱桃之乡"称号;
                        </p>
                    </div>
                </li>
                <li>
                    <div class="weather 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_weather" style="display: none;">
                        <p class="ptit">
                            气候
                        </p>
                        <p class="p1">
                            温带东亚季风型大陆半湿润性气候
                        </p>
                        <p>
                            大樱桃喜温喜光,怕涝怕旱,忌风忌冻,多生于山坡阳处或沟边。适合于海拔300-600米,年平均气温10-13摄氏度以上,早春气温变化不剧烈,夏季凉爽干燥,雨量适中,光照充足的地区栽培。"果来果趣"大樱桃种植基地平均海拔500米,年温适中,雨量充沛,无霜期长,终霜期早,年平均气温12度左右,降雨700余毫米,无霜期250天,十分适宜大樱桃栽培。因此,"果来果趣"大樱桃种植基地出产的大樱桃是最优质烟台大樱桃。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="size foo-title" style="width: 55px; height: 55px; 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: 16px;">
                        规格
                    </div>
                    <div class="cate_content cate_size">
                        <p class="ptit">
                            规格
                        </p>
                        <div class="cate_size_img">
                            <div class="fl">
                                <img src="images/tree_dahongzao.jpg">
                                <p>
                                    大红灯
                                </p>
                                <p>
                                    平均直径26.83mm重9.6g
                                </p>
                            </div>
                            <div class="fr">
                                <img src="images/tree_meizao.jpg">
                                <p>
                                    美早
                                </p>
                                <p>
                                    平均直径27.48mm重11.2g
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <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>
                </li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
        $(function () {
            // let's roll!
            $.scrollIt();
            $.fooTree();
            service_hide_f();
        });
    </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字层叠 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字提示框 提示文字 文字拖动 文字拖拽 文字翻转 文字旋转 文字淡出淡进 文字淡出 文字淡进 文字全屏 文字延迟加载 文字延迟 文字加载 文字收缩展开 文字收缩 文字展开 360全景 360度全景 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 文字切换 文字选项卡 文字滑动 文字滑块 文字滚动 文字无缝滚动 文字间歇滚动 滑动星星打分 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 收缩展开 展开收缩 收缩 展开 渐隐切换 图片文字 文字导航菜单 文字导航 文字菜单 淡出淡进 淡出 淡进 文字 文字插件 其他 浮动菜单 浮动导航 收缩菜单 收缩导航 文字标签 文字标签云 标签云 文字提示框 提示文字 文字淡出淡进 文字淡出 文字淡进 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到