伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-滚动,背景
 6213  71  查看评论 (4)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8

实现代码

HTML<div id="cbp-fbscroller" class="cbp-fbscroller">     <nav>         <a href="http://yzshield.com/quot;#fbsection1" class="cbp-fbcurrent">Section 1</a>"         <a href="http://yzshield.com/quot;#fbsection2">Section 2</a>"         <a href="http://yzshield.com/quot;#fbsection3">Section 3</a>"         <a href="http://yzshield.com/quot;#fbsection4">Section 4</a>"         <a href="http://yzshield.com/quot;#fbsection5">Section 5</a>"     </nav>         <section id="fbsection1"></section>         <section id="fbsection2"></section>         <section id="fbsection3"></section>         <section id="fbsection4"></section>         <section id="fbsection5"></section> </div>CSS/* Set all parents to full height */ html,body,.container,.cbp-fbscroller,.cbp-fbscroller section { height:100%; } /* The nav is fixed on the right side  and we center it by translating it 50%  (we don't know it's height so we can't use the negative margin trick) */ .cbp-fbscroller > nav { position:fixed; z-index:9999; right:100px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .cbp-fbscroller > nav a { display:block; position:relative; color:transparent; height:50px; } .cbp-fbscroller > nav a:after { content:''; position:absolute; width:24px; height:24px; border-radius:50%; border:4px solid #fff; } .cbp-fbscroller > nav a:hover:after { background:rgba(255,255,255,0.6); } .cbp-fbscroller > nav a.cbp-fbcurrent:after { background:#fff; } /* background-attachment does the trick */ .cbp-fbscroller section { position:relative; background-position:top center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; } #fbsection1 { background-image:url(../images/1.jpg); } #fbsection2 { background-image:url(../images/2.jpg); } #fbsection3 { background-image:url(../images/3.jpg); } #fbsection4 { background-image:url(../images/4.jpg); } #fbsection5 { background-image:url(../images/5.jpg);JavaScriptvar cbpFixedScrollLayout = (function() { // cache and initialize some values var config = { // the cbp-fbscroller′s sections $sections : $( '#cbp-fbscroller > section' ), // the navigation links $navlinks : $( '#cbp-fbscroller > nav:first > a' ), // index of current link / section currentLink : 0, // the body element $body : $( 'html, body' ), // the body animation speed animspeed : 650, // the body animation easing (jquery easing) animeasing : 'easeInOutExpo' }; function init() { // click on a navigation link: the body is scrolled to the position of the respective section config.$navlinks.on( 'click', function() { scrollAnim( config.$sections.eq( $( this ).index() ).offset().top ); return false; } ); // 2 waypoints defined: // First one when we scroll down: the current navigation link gets updated.  // A `new section′ is reached when it occupies more than 70% of the viewport // Second one when we scroll up: the current navigation link gets updated.  // A `new section′ is reached when it occupies more than 70% of the viewport config.$sections.waypoint( function( direction ) { if( direction === 'down' ) { changeNav( $( this ) ); } }, { offset: '30%' } ).waypoint( function( direction ) { if( direction === 'up' ) { changeNav( $( this ) ); } }, { offset: '-30%' } ); // on window resize: the body is scrolled to the position of the current section $( window ).on( 'debouncedresize', function() { scrollAnim( config.$sections.eq( config.currentLink ).offset().top ); } ); } // update the current navigation link function changeNav( $section ) { config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' ); config.currentLink = $section.index( 'section' ); config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' ); } // function to scroll / animate the body function scrollAnim( top ) { config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing ); } return { init : init }; })();
相关伟德BETVICTOR-滚动,背景

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 12875  39

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 10249  80

zepto移动端全屏滚动

移动端整屏滚动效果
  滚动
 4473  11

HTML5单页面全屏滚动手机1946韦德最新网站

全屏滚动代码简单,非常适合新手。
  滚动
 15576  107

讨论这个项目(4)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    、天凉好个秋 0
    2018/1/1 13:28:17
    怎么设置那圆圈的颜色咧? 回复
    ??? 梦幻 0
    2017/12/1 22:37:40
    Eason~ 0
    2017/9/18 11:07:31
    这个怎么实现的,有什么思路吗
        就叫成长吧!0
        2017/11/6 12:45:16
        background-attachment:fixed;试下效果就知道怎么实现了。- -.
    回复
取消回复