window.onload = function () { // //需求1:给ul和ol中的li对应的上色。 // //需求2:给每一个ol中的li添加事件,点击后页面跳转到对应的ul中的li上。 // // //0.获取相关元素。 // var ul = document.getElementById("tiaolou"); // var ol = document.getElementsByTagName("ol")[0]; // var olLiArr = ol.children; // var ulLiArr = ul.children; // // //需求2:给每一个ol中的li添加事件,点击后页面跳转到对应的ul中的li上。 // var timer = null; // var target = 0; // var leader = 0;//要想获取页面的y坐标值,必须设置window.onscroll事件。 // // window.onscroll = function () { // leader =scroll().top;//获取页面被卷去的头部距离。赋值给y坐标 // } // // //思路:点击ol中的li,设置目标值,然后利用缓动动画,移动到指定位置。 // for(var i=0;i0?Math.ceil(step):Math.floor(step); // leader = leader + step; // //让页面移动 // window.scrollTo(0,leader); // console.log(1); // //清除定时器。 // if(target === leader){ // clearInterval(timer); // } // },30); // } // } // //获取被卷去部分兼容性写法 // function scroll(){ // return { // top: window.pageYOffset || document.documentElement.scrollTop, // left: window.pageXOffset || document.documentElement.scrollLeft // } // } var AllHet = $(window).height(); var mainHet= $('.floatCtro').height(); var fixedTop = (AllHet - mainHet)/2 // $('div.floatCtro').css({top:fixedTop+'px'}); $('.floatCtro li').click(function(){ var ind = $('.floatCtro li ').index(this)+1; var topVal = $('#float0'+ind).offset().top; $('body,html').animate({scrollTop:topVal},1000) }) $('.floatCtro a').click(function(){ $('body,html').animate({scrollTop:0},1000) }) $(window).scroll(scrolls) scrolls() function scrolls(){ var f1,f2,f3,f4,f5,f6; var fixRight = $('ol li'); var blackTop = $('div.floatCtro a') var sTop = $(window).scrollTop(); f1 = $('#float01').offset().top; f2 = $('#float02').offset().top; f3 = $('#float03').offset().top; f4 = $('#float04').offset().top; f5 = $('#float05').offset().top; f6 = $('#float06').offset().top; if(sTop<=f2-100){ blackTop.fadeOut(300).css('display','none') } else{ blackTop.fadeIn(300).css('display','block') } if(sTop>=f1){ fixRight.eq(0).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f2-100){ fixRight.eq(1).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f3-100){ fixRight.eq(2).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f4-100){ fixRight.eq(3).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f5-100){ fixRight.eq(4).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f6-100){ fixRight.eq(5).addClass('cur').siblings().removeClass('cur'); } } }