侧边导航

2019-04-15 19:19发布

站内文章 / PIC单片机
15513 0 1166
HTML代码：

悬赏金

路飞

索罗

罗宾

娜美

乌索普

CSS代码： *{margin:0;padding:0;} .content{max-width: 750px;min-width:320px;margin:0 auto;} p{font-size: 42px;text-align: center;line-height: 100px;} .content img{width:100%;} .nav{position: fixed;top:20%;right: 10%;} .nav p{border:1px solid red;background-color: yellow;} .nav .actv{background-color: blue;}五张图片依次竖直排列，现在用JS实现当浏览器窗口滑到那张图片，右边导航相应名字的背景颜 {MOD}变化和点击每个名字将浏览器窗口切换到相应图片。js代码： js逻辑优化：
完整代码： Document

悬赏金

路飞

索罗

罗宾

娜美

乌索普


面向对象编程： $(function(){            //电梯            var speed=1000,//滑动的速度，单位ms                body = $('body,html');            $(window).scroll(function (){                var top1 = [];                for (var ii=0;ii<5;ii++){                    top1.push($("#f"+(ii+1)).offset().top);                }                var cur = 0;                var topP = $(document).scrollTop();                var lastTop=$('#f5').offset().top-600;              /*  if(topP>700&&topPp').eq(cur).addClass("actv").siblings().removeClass("actv");            });            $('.nav>p').on('click', function(){                var h = $('#'+$(this).attr('data-f')).offset().top;                body.stop(true, true).animate({scrollTop: h}, speed);            });            $('.imgBox>.pincou').on('click',function(){                body.stop(true, true).animate({scrollTop: $('#f5').offset().top}, speed);            });  })


热门文章