在开发页面的过程中,难免会遇到楼层跳转的效果,下面给大家分享两种自己的效果,一种是js的,但是需要用到animate的函数,一种是jquery的,直接拿来用就好了。
我在这里就不用封装了,改天要用自己也可以过来看看,如果大家愿意,也可以自己封装成方法再使用。
当然网上也很多类似的插件,比我的要好很多,所以各位大神有人看到了给我改进的意见,谢谢了。
第一种:jquery实现的
1、先来看看html布局
<div class="container"> <div class="inner-container"> <div class="inner">第一层</div> <div class="inner">第二层</div> <div class="inner">第三层</div> <div class="inner">第四层</div> <div class="inner">第五层</div> <div class="inner">第六层</div> <div class="inner">第七层</div> <div class="inner">第八层</div> </div> <div class="floor"> <div class="btn on">第一层</div> <div class="btn">第二层</div> <div class="btn">第三层</div> <div class="btn">第四层</div> <div class="btn">第五层</div> <div class="btn">第六层</div> <div class="btn">第七层</div> <div class="btn">第八层</div> </div> </div>
2,再来看看我的布局;
* { padding: 0; margin: 0; list-style: none; } .container, .inner-container { width: 1000px; } .container { margin: 0 auto; } .container .inner { width: 100%; height: 500px; margin: 20px; line-height: 500px; font-size: 50px; background: tan; text-align: center; } .container .floor { width: 50px; height: 320px; position: fixed; top: 0; bottom: 0; left: 0; margin: auto; } .container .floor .btn { line-height: 40px; width: 100%; background: gold; color: #fff; cursor: pointer; border-bottom: 1px solid #fff; } .container .floor .btn.on { background-color: #BE0000; }
3、最后看看我的jquery;
/ 获取按钮 var btn = $('.floor .btn'); // 获取楼层 var inner = $('.inner-container .inner'); // 给每个floor按钮添加点击事件 btn.on('click', function() { // 保存当前按钮的下标 var Index = $(this).index(); // 给当前的按钮添加类用来控制按钮的背景 $(this).addClass('on').siblings().removeClass('on'); // 设置每个floor滚动到顶部页面顶部的距离 $('html, body').animate({ scrollTop: $('.inner-container .inner').eq(Index).offset().top }) }); // 滚动监听, 给每个btn添加背景 $(document).on('scroll', function() { // 获取滚动条滚动的距离 var tops = $(document).scrollTop(); for(var i = 0; i < inner.length; i++) { // 如果楼层距离页面顶部的距离小于或者等于滚动条滚动的距离 + 200px时 if(inner.eq(i).offset().top <= tops + 200) { // 给当前的按钮添加背景 btn.eq(i).addClass('on').siblings().removeClass('on'); } } })
第二种:JavaScript实现
直接贡献JavaScript了。
// 获取所有的按钮 var btn = document.getElementsByClassName('btn'); // 获取所有的楼层 var inner = document.getElementsByClassName('inner'); // 获取body var body = document.getElementsByTagName('body')[0]; for(var i = 0; i < btn.length; i++) { // 保存下标 btn[i].index = i; btn[i].onclick = function() { animate(body, { // 给body设置向上滚动的距离 scrollTop: inner[this.index].offsetTop }, 1000, Tween.Linear); //取消所有btn的背景 for(var j = 0; j < inner.length; j++) { btn[j].className = 'btn'; }; // 给当前的btn设置背景 btn[this.index].className = 'btn active'; } } // 注册滚动监听事件 window.onscroll = function() { // 获取滚动条距离页面底部的距离 var tops = document.documentElement.scrollTop || document.body.scrollTop; for(var i = 0; i < inner.length; i++) { if(inner[i].offsetTop <= tops + 200) { //取消所有btn的背景 for(var j = 0; j < inner.length; j++) { btn[j].className = 'btn'; }; // 给当前的btn设置背景 btn[i].className = 'btn active'; } } }
。