基于jquery實現產品樹形介紹頁特效



30 116 39



特效描述:基于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

加群請備注:從官網了解到

老夫子电子