function floorMove(floors, floorNav) { this.floors = $(floors); this.floorNav = $(floorNav); } floorMove.prototype = { constructor: floorMove, CscrollTop: $(window).scrollTop(), floorTop: function (floor) { var floorTops = []; var floors = this.floors.find(floor); for (var i = 0; i < floors.length; i++) { floorTops[i] = floors[i].offsetTop; } console.log(floorTops); return floorTops; }, Cwidth: $(window).width(), Cheigth: $(window).height(), //窗口大小改变高宽 findDimensions: function () { if (window.innerWidth) { this.Cwidth = window.innerWidth; } else if ((document.body) && (document.body.clientWidth)) { this.Cwidth = document.body.clientWidth; } if (window.innerHeight) { this.Cheigth = window.innerHeight; } else if ((document.body) && (document.body.clientHeight)) { this.Cheigth = document.body.clientHeight; } if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { this.Cheigth = document.documentElement.clientHeight; this.Cwidth = document.documentElement.clientWidth; } console.log(this.Cwidth); }, //nav显示还是隐藏 floorNavShow: function () { if (this.CscrollTop > (this.floorTops[0] - 255) && this.Cwidth > 1200) { this.floorNav.show("fast"); if (this.Cwidth > 1300) { this.floorNav.css({ "left": ((this.Cwidth - 1180) / 2 - 55) + "px" }); } else if (this.Cwidth < 1300 && this.Cwidth > 1200) { this.floorNav.css({ "left": ((this.Cwidth - 1180) / 2 - 40) + "px" }); } else { this.floorNav.hide(); } } else { this.floorNav.hide("fast"); } console.log(1111111111); }, floorColor: function () { var CscrollTops = this.CscrollTop; console.log(122222222222); var floor = this.floors.find("div"); console.log(floor[1]); var floor1 = floor[1].offsetTop; console.log(floor1); var floorTops = []; var floorColor = ["#f1a849", "#bc8bfe", "#6f6bfe", "#21ca91", "#df71c8", "#3c9edf"]; var floorNavLi = this.floorNav.find("li"); CscrollTops = $(window).scrollTop(); floor.each(function (index) { floorTops[index] = floor[index].offsetTop; floorNavLi.eq(index).hover(function () { $(this).css({ "background": floorColor[index], "color": "#fff" }); }, function () { if (CscrollTops > (floorTops[index] - 255) && CscrollTops < (floorTops[index + 1]) - 255) { $(this).css({ "background": floorColor[index], "color": "#000" }).siblings().css({ "background": "#fff", "color": "#b0b0b0" }); } else if (CscrollTops > (floorTops[floor.length - 1] - 255)) { floorNavLi.eq(floor.length - 1).css({ "background": floorColor[index + 1], "color": "#fff" }).siblings().css({ "background": "#fff", "color": "#b0b0b0" }); } }); floorNavLi.eq(index).click(function () { $(this).css({ "background": floorColor[index], "color": "#fff" }).siblings().css({ "background": "#fff", "color": "#b0b0b0" }); $("html,body").animate({ scrollTop: floorTops[index] }, 300).dequeue(); }) }) }, }; var jtFloorMove = new floorMove(".floors", "#floorsId"); $(window).scroll(function () { jtFloorMove.floorColor(); }); jtFloorMove.floorTop(".floor"); jtFloorMove.floorColor(); window.onresize = function () { jtFloorMove.findDimensions(); jtFloorMove.floorNavShow(); };
相关分类