[代码样式]制作网易2014世界杯史话/世界杯时间轴效果

[代码样式]制作网易2014世界杯史话/世界杯时间轴效果

简介

2014巴西世界杯正在如火如荼的进行中,作为球迷们,你们对世界杯的了解有多少呢?如果了解不多的话,可以看看网易2014巴西世界杯专题页面的“世界杯史话”栏目,这里有包含了历届世界杯的基本信息、冠军、精彩瞬间、世界杯之星和当时最关注的事件,相信通过这些内容,您能更全面的了解世界杯及其历史。

“世界杯史话”栏目不仅信息全面,而且效果也不错,看上去就像世界杯时间轴一样,我们也来做一个吧。

制作这样的效果,我们用到的主要是 jQuery Tab 选项卡插件 Tabslet,上面的每个年代我们把它当作 Tab 选项卡的选项按钮,下面的则当成对应的内容。当然了,使用其他 Tab 选项卡插件应该也是可以制作的。

兼容

浏览器兼容:兼容 IE6、IE7 及以上版本和其他主流现代浏览器,但效果并非所有浏览器一致。

制作方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.tabslet.min.js"></script>

2、HTML

由于 HTML 代码较多,所以省略一些结构相同或非重要代码。

<div class="tabs">
    <a href="https://www.dowebok.com/javascript:" class="prev" title="上一届">&lt;</a>
    <a href="https://www.dowebok.com/javascript:" class="next" title="下一届">&gt;</a>
    <ul class="tabNav">
        <li class="first"><a href="#tab-1">
            <strong>第<em>1</em>届<em>乌拉圭</em>世界杯</strong>
            <b></b><i></i>
            <span class="year">1930</span>
        </a></li>
        <li><a href="#tab-2">
            <strong>第<em>2</em>届<em>意大利</em>世界杯</strong>
            <b></b><i></i>
            <span class="year">1934</span>
        </a></li>
        ……
    </ul>
    <div class="tabPane" id="tab-1">内容1</div>
    <div class="tabPane" id="tab-2">内容2</div>
</div>

3、CSS

CSS 并没有什么难点,都是普通的图片、文字排版,主要是年代部分的定位有点复杂,所以这里仅贴出这部分代码。

.tabNav {
    margin-bottom: 25px;
    font-size: 0;
    text-align: center;
}
.tabNav li {
    position: relative;
    display: inline-block;
    width: 38px;
    font-size: 12px;
    *display: inline;
    *zoom: 1;
}
.tabNav a {
    text-decoration: none;
}
.tabNav strong {
    display: none;
    position: absolute;
    left: -80px;
    top: -73px;
    width: 200px;
    height: 38px;
    font: 16px/38px "Microsoft Yahei";
    color: #fff;
    background-color: #059e3f;
}
.tabNav strong em {
    font-style: normal;
    color: #fffc1f;
}
.tabNav b {
    display: none;
    position: absolute;
    left: 19px;
    top: -35px;
    height: 35px;
    border-left: 1px solid #059e3f;
}
.tabNav i {
    display: none;
    position: absolute;
    left: 14px;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 11px;
    background-color: #059e3f;
    overflow: hidden;
}
.tabNav .year {
    display: block;
    height: 20px;
    padding-top: 18px;
    font: 11px/20px arial;
    text-align: center;
    color: #888;
    background: url(images/graduate_bg2.png) 0 0 no-repeat;
    cursor: pointer;
}
.tabNav .first .year {
    background-image: url(images/graduate_bg1.png);
}
.tabNav .active strong, .tabNav .active b, .tabNav .active i {
    display: block;
}

4、JavaScript

$(function(){
    $('.tabs').tabslet({
        animation: true,
        controls: {
            prev: '.prev',
            next: '.next'
        }
    });
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery图片模糊插件crossfade.js

2020-10-23 16:05:54

脚本代码

[代码样式]jQuery幻灯片插件Flickerplate

2020-10-23 16:05:56

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索