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



71 281 94



特效描述:基于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全景 html5文字动画 悬浮浮动漂浮 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 滑动星星打分 收缩收起展开 浮动提示框 图片文字 渐隐切换 文字导航菜单 淡出淡入淡进 文字 其他更多 浮动导航菜单 收缩导航菜单 文字标签 文字提示框 文字淡出淡进 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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