/* oop 思想: 将实现功能动各个逻辑方法,封装中一个对象中实现,提供给外界简便操作方式,可以实现代码的复用和代码方法的业务逻辑不暴露在外界,并且可以避免变量污染。 实际上也上基于面向过程的一种优化的方案,所以在使用oop思想的时候,也需清楚知道实现的过程。 */ //定义一个用于滚动实现切换的一个对象Slide var Slide = { everyTop:[],//存储所有屏距离文档顶部的距离 container:"#container",//定义一个父级容器,id containerBox:null,//获取到的容器 //用于获取顶部距离的方法 getTop:function(){ //获取父级容器 ,this 此处指向的是getTop 函数所属对象 Slide this.containerBox = document.querySelector(this.container); var section = this.containerBox.querySelectorAll("section");//获取所有屏 //获取所有屏的距离文档顶部的距离 for(var i=0;i<section.length;i++){ this.everyTop.push(section[i].offsetTop); } }, //定义一个方法,用于实现滚动切换,只做切换 changeScreen:function(){ console.log('鼠标正在滚动...'); }, //定义一个方法,用于绑定事件,仅绑定事件 bindEvent:function(){ //判断浏览器兼容性 if('onmousewheel' in window){//非火狐 window.onmousewheel = this.changeScreen; }else{//火狐浏览器 window.addEventListener('DOMMouseScroll',this.changeScreen); } }, //初始化方法,所有功能从这里开始,提供给外界使用(入口) init:function(){ this.getTop(); //获取顶部距离 this.bindEvent();//绑定滚动事件 } } //初始化 Slide.init();
oop 思想
最新推荐文章于 2024-07-23 08:52:55 发布