面向对象的三大小技巧：
- this永远是实例，所有的操作都是给this添加属性和方法
- 全局变量都是实例的私有属性
- 不要函数嵌套函数，全局的函数都是原型上面公有的方法，实例调用
回调：把函数的定义阶段作为普通参数传递，回调函数中的this指向window，
箭头函数中的this指向父级
引用一个类，使用的时候要创建一个实例对象
继承父类身上的属性和方法
给元素身上绑定事件：on('事件名',callback回调函数)，绑定多个事件都可以执行，只要触发了事件的执行，解除绑定事件：off('事件名'，有名的函数名)
事件的绑定都是异步的
创建父类BaseToTop 回到顶部
class BaseToTop{
// 构造函数才参数传在constructor上面
constructor(opt){
// 要是忘记传入opt对象的时候
opt=opt||{};
this.ele=opt.ele;
this.timer=null;
this.step=null;
this.bOk=false; // 随时停下的状态判断，Boolean值
this.duration=opt.duration || 1000;
this.clickEvent(); // 点击事件，回到顶部
}
clickEvent(){
// 给元素身上绑定点击事件
this.ele.on('click',()=>{
// 计算步长
var target=$(window).scrollTop();
var duration=this.duration;
var interval=30;
this.step=target/duration*interval;
// 使用this之前一定要提醒自己this是什么
this.timer=setInterval(()=>{
// 移动到顶部 最好不要函数嵌套函数 定时器里面
this.moveTop();
},interval);
})
}
moveTop(){
// 每次获取到最新的位置
var curTop=$(window).scrollTop();
// 最新的位置上面减去step
curTop-=this.step; // 这个this是谁取决你函数调用的时候this是谁
if(curTop<=0){
$(window).scrollTop(0); // 设置为0
clearInterval(this.timer); // 关闭定时器
this.scrollEvent&&this.scrollEvent(); // 再次滚动的时候出现回到顶部的按钮
return; // 阻止程序执行
}
// 重新赋值最新的位置
$(window).scrollTop(curTop);
this.bOk=false; // 点击了按钮设置Boolean值为false
}
}
创建一个子类继承父类，回到顶部按钮开始隐藏，超过一屏显示
class ShowOrHide extends BaseToTop{
// 要继承需要传入参数 opt 先继承父类原有的 父类如果有参数，就必须写参数
constrouctor(opt){
super(opt);
this.name=null;
this.scrollEvent();
}
// 超过一屏才显示按钮
scrollEvent(){
// 绑定事件，方便解除
$(window).on('scroll',this.name=()=>{
// 超过一屏显示
if($(window).scrollTop()>$(window).height){
this.ele.show();
}else{
this.ele.hide();
}
})
}
}
创建子类继承父类，按钮点击后立即隐藏
class quickHide extends ShowOrHide{
// 父类有参数，子类继承父类就要有参数
constructor(opt){
super(opt);
this.btnHide();
}
btnHide(){
this.ele.on('click',()=>{
this.ele.hide(); // 当前按钮隐藏
$(window).off('scroll',this.name); // 解除scroll事件的绑定
})
}
}
空白处点击随时停下不滚动
class stopAnytime extends ShowOrHide{
constructor(opt){
super(opt);
this.stop();
}
stop(){
// 给scroll添加事件：对bOk的判断；在定时器里面设置bok为false
$(window).on('scroll',()=>{
if(this.bOk) clearInterval(this.timer); // 关闭定时器就是停止滚动
this.bOk=true;
})
}
}
创建实例
// 基础版的回到顶部
var toTop=new BaseToTop({
ele:$('a'),
duration:700
})
// 按钮回到顶部隐藏，滚动显示
var toTop2=new ShowOrHide({
ele:$('a'),
duration:700
})
// 按钮点击立马隐藏
var toTop3=new quickHide({
ele:$('a'),
duration:700
})
// 随时隐藏
var toTop4=new stopAnytime({
ele:$('a'),
duration:700
})
HTML代码
<style>
body,html{
width:100%;
height:300%;
background: -webkit-linear-gradient(top,lightpink,lightgreen,lightblue,darkolivegreen);
}
a{
width: 80px;
height: 80px;
border-radius: 40px;
background: darkgreen;
color: white;
font-size: 20px;
text-align: center;
line-height: 80px;
position: fixed;
right:20px;
bottom:30px;
text-decoration:none;
display: block;
}
#btn2{
left:30px;
bottom:30px;
background: red;
}
</style>
</head>
<body>
<a href="javascript:;" id="btn">toTop</a>
<script src="js/jquery.js"></script>
<script src="js/ToTop.js"></script>
<script>
var toTop=new QuicklyStop({
ele:$('#btn'),
duration:700
});
</script>
</body>
</html>
网友评论