因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看。有的同学可能说了，第三方博客框架这么多，为什么还要去手写的，你说这个有可能是没有看到打开这个博客。 样式介绍 给大
- 点击不同标签页出现相应界面
- 切换动画
- 点击蒙版收回顶层标签页
切换动画
class Animator {
// 构造函数
constructor() {
this.durationTime = 0;
this.easingFn = k => k;
this.eventHandlers = new Map();
}
// 动画移动速度所用的函数
easing(fn) {
if (typeof fn !== "function") {
throw new Error("Easing must be a function,such as k => k");
}
this.easingFn = fn;
return this;
}
// 动画时间
duration(time) {
if (typeof time !== "number") {
throw new Error("Duration must be a number");
}
this.durationTime = time;
return this;
}
// 响应函数
on(type,handler) {
if (typeof handler !== "function") {
throw new Error("Handler must be a function");
}
this.eventHandlers.set(type,handler);
return this;
}
// 动画生成
animate() {
const duration = this.durationTime;
const easing = this.easingFn;
const update = this.eventHandlers.get("update") || (t => t);
const complete = this.eventHandlers.get("complete") || (() => {});
let timer = null;
const startTime = +new Date();
function step() {
const percent = Math.min(1,(+new Date() - startTime) / duration);
if (percent < 1) {
update(easing(percent));
timer = requestAnimationFrame(step);
} else {
cancelAnimationFrame(timer);
update(easing(1));
complete();
}
}
timer = requestAnimationFrame(step);
}
}
/*
* 这里是专门写了一个产生动画的函数
* 传参: start:Number,step:Number,el:object(元素对象)
* 传入这些参数之后就可以产生相应的动画效果
*/
var move = function(start,step,el) {
new Animator()
.duration(200)
.easing(k => k)
.on("update",t => {
el.style.right = String(start + t * step) + "%";
})
.animate();
};
网页布局
点击逻辑
.overlay {
cursor: url("你的图标url"),pointer;
}
网页源码
服务热线 19970861797
