大家有没有发现网站右下角新的海贼王 GoTop 看板呢😏😏最近在翻看海贼,找到一组很萌的海贼探头表情,寻思着就做成了网站 GoTop 看板,喜欢的朋友可以自取。
前情概要
从顶部展示图片看到,这一套看板总共包括这10个角色:
图片出处已不可考,期待有大佬可以扩充一下这组图片🤩。
功能说明
emmm,功能嘛,就是点击一下能够返回页面顶部,然后还有以下几个附加功能,大家可以参考后面的 “食用方法” 自行优化。
- 随机选择看板图片。
- 屏幕尺寸大于1024px带有鼠标悬停探头特效。(应该适应大部分电脑屏幕大小了)
- 屏幕尺寸小于1024px默认显示已经完成探头。(pad,手机)
- 屏幕尺寸小于460px缩小图片尺寸。(适配主流手机尺寸)
预览
电脑端鼠标悬停探头特效:
移动端:
食用方法
首先是添加以下 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>
Comments | 为博客添加海贼王GoTop看板已关闭评论