zoukankan      html  css  js  c++  java
  • jquery 分页

    <script>
    $(function(){
    var AllHet = $(window).height();

    var mainHet= $('.floatCtro').height();
    var fixedTop = (AllHet - mainHet)/2
    // $('div.floatCtro').css({top:fixedTop+'px'});


    $('div.floatCtro p').click(function(){
    var ind = $('div.floatCtro p').index(this)+1;
    var topVal = $('#float0'+ind).offset().top;
    $('body,html').animate({scrollTop:topVal},500)
    })
    $('div.floatCtro a').click(function(){
    $('body,html').animate({scrollTop:0},500)
    })
    $(window).scroll(scrolls)
    scrolls()
    function scrolls(){
    var f1,f2,f3,f4,f5,f6,f7,bck;
    var fixRight = $('div.floatCtro p');
    var blackTop = $('div.floatCtro a')
    var sTop = $(window).scrollTop();
    fl = $('#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>=fl){
    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');
    }
    }
    })
    </script>


    <div class="floatCtro">
    <p class="cur">热门名牌</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <a>
    <font style="60px; height:1px; display:block"></font>
    <span>返回顶部</span>
    </a>
    </div>

  • 相关阅读:
    【2017-3-1】数组
    【2017-2-27】三大类
    【2017-2-25】 循环语句 跳转语句 迭代法 穷举法 异常语句
    【2017-02-22】if语句 if语句的嵌套 及巩固练习------------练习补充
    【2017-02-22】if语句 if语句的嵌套 及巩固练习
    【2017-02-20】C#基础 -- 阶段总结
    【2017-02-20】C#基础
    【2017-02-19】C#基础
    【2017-02-18】C#基础
    Windows 64位下安装Redis详细教程
  • 原文地址:https://www.cnblogs.com/wzzl/p/4745248.html
Copyright © 2011-2022 走看看