20180325-1-1.png
大家有没有发现网站右下角新的海贼王 GoTop 看板呢😏😏最近在翻看海贼，找到一组很萌的海贼探头表情，寻思着就做成了网站 GoTop 看板，喜欢的朋友可以自取。

前情概要

从顶部展示图片看到，这一套看板总共包括这10个角色：

路飞（Luffy），索隆（Zoro），山治（Sanji），娜美（Nami），乔巴（Chopper），乌索普（Usopp），布鲁克（Brook），弗兰奇（Franky），罗宾（Robin），艾斯（Ace）

图片出处已不可考，期待有大佬可以扩充一下这组图片🤩。

功能说明

emmm，功能嘛，就是点击一下能够返回页面顶部，然后还有以下几个附加功能，大家可以参考后面的 “食用方法” 自行优化。

  1. 随机选择看板图片。
  2. 屏幕尺寸大于1024px带有鼠标悬停探头特效。（应该适应大部分电脑屏幕大小了）
  3. 屏幕尺寸小于1024px默认显示已经完成探头。（pad，手机）
  4. 屏幕尺寸小于460px缩小图片尺寸。（适配主流手机尺寸）

预览

电脑端鼠标悬停探头特效：
20180325-1-3.gif
移动端：
20180325-1-2.gif

食用方法

首先是添加以下 jQuery 代码。

    //gotop 
    $(document).ready(function ($) {
        var offset = 100,
            offset_opacity = 1200,
            scroll_top_duration = 700,
            $back_to_top = $('.cd-top');

        //hide/show "gotop" link
        $(window).scroll(function () {
            ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
            if ($(this).scrollTop() > offset_opacity) {
                $back_to_top.addClass('cd-fade-out');
            }
        });

        //smooth scroll to top
        $back_to_top.on('click', function (event) {
            event.preventDefault();
            $('body,html').animate({
                scrollTop: 0,
            }, scroll_top_duration);
        });
    });

    //随机更换gotop图片
    var CdImgArray=new Array();
    var CdImgRoot="https://view.phower.me/images/";
    CdImgArray[0]="2018/03/25/OP-Ace.png";
    CdImgArray[1]="2018/03/25/OP-Brook.png";
    CdImgArray[2]="2018/03/25/OP-Chopper.png";
    CdImgArray[3]="2018/03/25/OP-Luffy.png";
    CdImgArray[4]="2018/03/25/OP-Nami.png";
    CdImgArray[5]="2018/03/25/OP-Sanji.png";
    CdImgArray[6]="2018/03/25/OP-Usopp.png";
    CdImgArray[7]="2018/03/25/OP-Zoro.png";
    CdImgArray[8]="2018/03/25/OP-Robin.png";
    CdImgArray[9]="2018/03/25/OP-Franky.png";

    $(window).load(function () {
        var num = Math.floor(Math.random() * 7);
        $("#cd-top-img").attr("src",CdImgRoot+CdImgArray[num]);
    });

看板图片可以去我的图床下载到你自己的空间，然后对应更换上面的链接就行。

接下来在你的样式表中添加以下 css 代码。

.cd-top {
    position: fixed;
    right: -110px;
    bottom: 35px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
}
.cd-top img {
    width: 110px;
}
.cd-top.cd-is-visible {
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
}
@media only screen and (max-width: 460px) {
    .cd-top img {
        width: 85px;
    }
    .cd-is-visible {
        right: -3px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 460px) {
    .cd-is-visible {
        right: -3px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 1024px) {
    .cd-is-visible {
        right: -30px;
        bottom: 35px;
        transform:rotate(7deg);
        -webkit-transform: rotate(7deg);
        -moz-transform: rotate(7deg);
    }
    .cd-is-visible:hover {
        right: -3px;
        bottom: 35px;
        transform:rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
    }
}

最后，在</body>之前添加下面的代码就可以调用了。

<a href="#" class="cd-top"><img id="cd-top-img" alt="回到顶部"></a>

20180325-1-4.png