|
今天本文实例为大家分享一下jquery实现滑动楼梯效果的具体代码,供大家参考,具体内容如下
思路:鼠标滚动的时候页面跟随变化,点击模块时候,实现指哪打哪效果
代码的实现
1.html和css代码
2.接下来进行引入一个 jQuery 文件然后进行jQuery代码的编写
- <script>
- $(function(){
-
- //定义判别
- var flag = true
-
- $(window).scroll(function(){
-
- if(flag){
- //显示隐藏的楼梯
- var scrollTop=$(this).scrollTop();
- if(scrollTop>=500){
- $("#floorNav").fadeIn()
- } else{
- $("#floorNav").fadeOut();
- }
-
- //指哪打哪
- $("#content li").each(function(){
- if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
- var index = $(this).index();
- $("#floorNav li").eq(index).addClass("hover")
- .siblings().removeClass("hover")
- }
-
- })
- }
- })
-
- //点击的时候滚动条滚动到相应的位置
- $("#floorNav li:not(:last)").click(function(){
- flag=false
- var index = $(this).index();
- $("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
-
- flag=true
- $(this).addClass("hover").siblings().removeClass("hover")
- })
-
- $("#floorNav li:last").click(function(){
- flag = false;
- $("html,body").animate({"scrollTop":0},200,function(){
- flag = true
- })
- })
- })
-
- </script>
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持锦尚中国。
|
|