很多博客和网站都为了增加权重,设置了外链中转,现在就简单实现一下这个效果。

跳转页面

其实就是一个简单页面,接收页面hash参数,然后再跳转到真正的链接。你还可以进行自定义设置,可以加一个特效。

css3动画特效:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
body {
margin: 0;
overflow: hidden;
}
.bouncing-loader {
display: flex;
justify-content: center;
align-content: center;
position: absolute;
width: 100%;
height: 100%;
background-color: #f1eeee;
}
.bouncing-loader > div {
margin-top: 500px;
width: 2rem;
height: 2rem;
background-color: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}

页面代码:

1
2
3
4
5
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>

js处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let url = window.location.search;
let outLink = [
{
id: 1,
name: 'csdn',
url: 'https://blog.csdn.net/fed_Mr.Mark ',
hash: '12swjed23dewdef24334'
}
]
url = url.slice(1, ).split('=')[1];
let realUrl = '';
for (let i = 0; i < outLink.length; i++) {
const element = outLink[i];
if (url == element.hash) {
realUrl = element.url;
}
}
if (realUrl) {
setTimeout(() => {
location = realUrl;
}, 3000);
} else {
alert('暂无链接!');
window.history.back();
}

正常页面

1
<a href="redirect/?url=12swjed23dewdef24334">个人博客</a>

最后

跳转效果
跳转效果

点击链接就可以到跳转页面,然后再到要去的页面。