码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery的美食时间轴焦点图插件

时间:2015-01-14 09:40:25      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换。另外,在图片上方也可以放置自定义样式的文字。

技术分享

在线预览   源码下载

实现的代码。

html代码:

<div class="main_w">
        <div class="index_zzw" id="index_zzw">
            <div class="index_zzw_main" id="index_zzw_main">
                <div class="zzw_item zzw_item_3" po="3" c="2">
                    <ul class="clearfix">
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia1.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">红烧排骨</a></h2>
                                <strong>这个红烧排骨超简单,不下厨的人都会做</strong> <span><a href="http://www.w2bc.com">健骨</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia2.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">红烧冰糖鸡翅中</a></h2>
                                <strong>做这道菜很快,只需15分钟即可,真的哦</strong> <span><a href="http://www.w2bc.com">美容</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia3.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">红烧小土豆</a></h2>
                                <strong>土豆富含钾、锌、铁,还含丰富赖氨酸</strong> <span><a href="http://www.w2bc.com">和胃健脾</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zzw_item zzw_item_2" po="2" c="1">
                    <ul class="clearfix">
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia4.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">椒香葱花饼</a></h2>
                                <strong>有螺旋层次感,而且有花椒和芝麻的香味</strong> <span><a href="http://www.w2bc.com">补充能量</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia5.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">流油咸鸭蛋</a></h2>
                                <strong>一打开,一股黄油流出来,真是超级香啊</strong> <span><a href="http://www.w2bc.com">补钙</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia6.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">皮蛋瘦肉粥</a></h2>
                                <strong>鲜香扑鼻,真心不错,里面肉肉也很软嫩</strong> <span><a href="http://www.w2bc.com">强身健体</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zzw_item zzw_item_4" po="4" c="3">
                    <ul class="clearfix">
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia7.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">西芹蜂蜜汁</a></h2>
                                <strong>蜂蜜中含180多种天然成分,营养丰富哦</strong> <span><a href="http://www.w2bc.com">瘦身</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia8.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">酸奶泡芙</a></h2>
                                <strong>里面是纯酸奶哦,不用担心发胖了,哈哈</strong> <span><a href="http://www.w2bc.com">美容</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia9.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">蓝莓山药</a></h2>
                                <strong>最天然的甜品,好吃,但是脂肪却超低</strong> <span><a href="http://www.w2bc.com">瘦身</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zzw_item zzw_item_1" po="1" c="5">
                    <ul class="clearfix">
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia10.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">蚝油西兰花</a></h2>
                                <strong>简单的焯水即保留了营养又清脆的口感</strong> <span><a href="http://www.w2bc.com">抗衰老</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia11.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">玉米蔬果沙拉</a></h2>
                                <strong>转用橄榄油和黑胡椒碎来调味,热量超低</strong> <span><a href="http://www.w2bc.com">瘦身</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia12.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">白菜米糊</a></h2>
                                <strong>把白菜叶煮熟,用搅拌机搅碎,超简单哦</strong> <span><a href="http://www.w2bc.com">瘦身</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zzw_item zzw_item_5" po="5" c="4">
                    <ul class="clearfix">
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia13.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">香煎培根彩椒卷</a></h2>
                                <strong>培根浓郁香气和彩椒鲜甜口感相结合,赞</strong> <span><a href="http://www.w2bc.com">补虚</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia14.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">酱爆鸡丁</a></h2>
                                <strong>这个可比炒宫保鸡丁简单多了哦,试试</strong> <span><a href="http://www.w2bc.com">防癌健脑</a></span>
                            </div>
                        </li>
                        <li><a href="http://www.w2bc.com">
                            <img src="images/lanrenzhijia15.jpg" /></a>
                            <div class="c">
                                <h2>
                                    <a href="http://www.w2bc.com">西葫芦谷垒</a></h2>
                                <strong>你吃过金黄色的香蕉西葫芦吗?好奇吧?</strong> <span><a href="http://www.w2bc.com">美容养颜</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="maskleft" id="maskleft">
            </div>
            <div class="maskright" id="maskright">
            </div>
            <div class="prev_btn prev_btn_1" id="zzw_prev_btn">
            </div>
            <div class="next_btn next_btn_1" id="zzw_next_btn">
            </div>
            <div class="index_3meal_tab" id="index_timelinebox">
                <div class="index_3meal_tab_w">
                    <span class="timex timex_0" id="i_time4"><span>早餐时间</span></span> <span class="timex timex_1 timex_current"
                        id="i_time10"><span>午餐时间</span></span> <span class="timex timex_2" id="i_time14"><span>
                            下午茶时间</span></span> <span class="timex timex_3" id="i_time16"><span>晚餐时间</span></span>
                    <span class="timex timex_4" id="i_time21"><span>夜宵时间</span></span>
                </div>
                <div class="timeline_left">
                </div>
                <div class="timeline_right">
                </div>
                <span class="time time4" id="i_time4">4:00</span> <span class="time time10" id="i_time10">
                    10:00</span> <span class="time time14" id="i_time14">14:00</span> <span class="time time16"
                        id="i_time16">16:00</span> <span class="time time21" id="i_time21">21:00</span>
                <span class="time time4_" id="i_time4_">4:00</span>
            </div>
        </div>
    </div>

via:http://www.w2bc.com/Article/16814

基于jQuery的美食时间轴焦点图插件

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4223144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!