html5全屏横向时间轴滑块代码



151 601 201



特效描述:html5 全屏横向时间轴 滑块代码,daskey时间轴滑块,html5全屏时间轴代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/dasky.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jmpress.min.js"></script>
<script type="text/javascript" src="js/dasky.eval.js"></script>

3. HTML代码

    <div id="dasky">
        <div class="step year">
            <div class="dsk-titlenode">
                2012
            </div>
            <div class="dsk-content">
                <p class="dsk-year-info">
                   一个时间表滑块。
                </p>
            </div>
        </div>
        <div class="step">
            <div class="dsk-circle">
                05/01</div>
            <h2 class="dsk-circle-title">
                daskey时间轴滑块</h2>
            <div class="dsk-content">
                <div class="dsk-info">
                    <h2>
                       daskey时间轴滑块
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exerc...</p>
                    <a href="#" class="dsk-link">查看更多</a>
                </div>
                <img src="images/1.png" alt="" />
            </div>
        </div>
        <div class="step">
            <div class="dsk-circle">
                12/16</div>
            <h2 class="dsk-circle-title">
               时尚的外观</h2>
            <div class="dsk-content">
                <div class="dsk-info">
                    <h2>
                        时尚的外观
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exerc...</p>
                    <a href="#" class="dsk-link">查看更多</a>
                </div>
                <img src="images/2.png" alt="" />
            </div>
        </div>
        <div class="step year">
            <div class="dsk-titlenode">
                2013
            </div>
            <div class="dsk-content">
                <p class="dsk-year-info">
                    使用产品的时间轴,展示等!
                </p>
            </div>
        </div>
        <div class="step">
            <div class="dsk-circle">
                01/20</div>
            <h2 class="dsk-circle-title">
                回退到旧浏览器</h2>
            <div class="dsk-content">
                <div class="dsk-info">
                    <h2>
                        回退到旧浏览器
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exerc...</p>
                    <a href="#" class="dsk-link">查看更多</a>
                </div>
                <img src="images/3.png" alt="" />
            </div>
        </div>
        <div class="step">
            <div class="dsk-circle">
                07/15</div>
            <h2 class="dsk-circle-title">
                CSS3动画</h2>
            <div class="dsk-content">
                <div class="dsk-info">
                    <h2>
                        CSS3动画
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exerc...</p>
                    <a href="#" class="dsk-link">查看更多</a>
                </div>
                <img src="images/4.png" alt="" />
            </div>
        </div>
        <div class="step">
            <div class="dsk-circle">
                11/03</div>
            <h2 class="dsk-circle-title">
                容易使用</h2>
            <div class="dsk-content">
                <div class="dsk-info">
                    <h2>
                       容易使用</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exerc...</p>
                    <a href="#" class="dsk-link">查看更多</a>
                </div>
                <img src="images/5.png" alt="" />
            </div>
        </div>
    </div>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 加载动画 滑动选项卡 滑动切换 滚动切换 滚动条切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 全屏焦点图 h5弹窗动画 html5弹窗动画 渐隐切换 全屏切换 淡出淡进 淡出 淡进 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 日期时间 时钟 日历 时间 日历插件 时间日期插件 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 图片淡出淡进 图片淡出 图片淡进 图片全屏 时间轴 竖直时间轴 横向时间轴 滑动选项卡 滑动切换 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片切换 图片选项卡 图标选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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