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>

  • 相关阅读:
    jquery.autocomplete.js 插件的自定义搜索规则
    经测试可用的汉字转拼音及汉字取首字母
    微信小程序UI学习
    微信小程序的生命周期和APP对象的使用
    微信小程序的配置详解
    微信小程序事件
    视图和渲染
    微信小程序<一>
    JS实战篇
    获取重复字符串的range,设置attributedText
  • 原文地址:https://www.cnblogs.com/wzzl/p/4745248.html
Copyright © 2011-2022 走看看