jQuery+fullPage.js制作百度百科史记

收藏

本文参展了百度百科史记2013http://baike.baidu.com/shiji/2013的效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

我们在每屏里面放一个 div，用于放背景图片，然后把热词和图片放在这个 div 里面，如：

<div class="section">
    <div class="science-inner inner">
        <a class="itemshow stiteml st1" href="javascript:void(0)">网络机顶盒</a>
        <a class="itemshow stiteml st2" href="javascript:void(0)">干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="javascript:void(0)">3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="javascript:void(0)">H7N9</a>
        <a class="stimg1" href="javascript:void(0)">
            <img width="181" height="166" src="images/h7n9.jpg">
        </a>
    </div>
</div>

我们在热词和图片中加一个 rel 属性，里面放4个数值，用逗号隔开，这4个数值的作用是用于定位，前两个是默认的位置，后两个是出现后的位置。添加之后代码如下：

<div class="section">
    <div class="science-inner inner">
        <a class="itemshow stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
        <a class="itemshow stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
        <a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153">
            <img width="181" height="166" src="images/h7n9.jpg">
        </a>
    </div>
</div>

CSS

CSS 主要是热词旁边“1月、2月”背景图片的定位，如：

.science-inner .st1 {
    background-position: 0 4px
}
.science-inner .st2 {
    background-position: 0 -59px
}
.science-inner .st3 {
    background-position: 0 -59px
}
.science-inner .st4 {
    font-size: 48px;
    background-position: 0 -104px
}

jQuery

首先设置一些基本的效果，比如背景颜色、锚链接、绑定菜单等等；

$(function() {
    $.fn.fullpage({
        slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        menu: '#menu'
    });
});

初始化后的回调函数，或者笼统的说是页面加载后的回调函数，本例是“史记”两个字的动画效果；

afterRender: function(){
    $('.screen-main span').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[2] + 'px',
            top: $arr[3] + 'px'
        }, 500);
    });
    $('.inner a').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[0] + 'px',
            top: $arr[1] + 'px'
        }, 500);
    });
}

滚动前后的回调函数，本例是热词很多图片的动画效果；

afterRender: function(){
    $('.screen-main span').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[2] + 'px',
            top: $arr[3] + 'px'
        }, 500);
    });
    $('.inner a').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[0] + 'px',
            top: $arr[1] + 'px'
        }, 500);
    });
}

3.3、滚动前后的回调函数，本例是热词很多图片的动画效果；

afterLoad: function(anchorLink, index){
    if(index == 1){
        $('.screen-main span').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[2] + 'px',
                top: $arr[3] + 'px'
            }, 500);
        });
    }
    if(index == 2 || index == 3 || index == 4 || index == 5){
        $('.inner').eq(index - 2).find('a').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[2] + 'px',
                top: $arr[3] + 'px'
            }, 500);
        });
    }
    if(index == 6){
        $('.zanzhu-con a').fadeIn(1000);
    }
},
onLeave: function(index, direction){
    if(index == 1){
        $('.screen-main span').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[0] + 'px',
                top: $arr[1] + 'px'
            }, 500);
        });
    }
    if(index == 2 || index == 3 || index == 4 || index == 5){
        $('.inner').eq(index - 2).find('a').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[0] + 'px',
                top: $arr[1] + 'px'
            }, 500);
        });
    }
    if(index == 6){
        $('.zanzhu-con a').fadeOut(1000);
    }
}

这样一个百度百科史记页面滚动效果就完成了，是不是很复杂，那就直接下载来用吧，换换图片就OK了。