jQuery全屏TAB滚动页面定位切换特效代码

jQuery全屏TAB页面切换代码是一款通过鼠标滚动页面或点击导航，tab页面滚屏切换效果代码。核心代码/** @Author: win* @Date: 2016-09-09 12:21:34* @Last Modified by: win* @Last Modified time: 2016-09-09 16:00:11*/'use strict';var $key = 0;//记录滚动到哪一个var canscroll = true;//用来限制滚动频率jQuery(document).ready(function ($) { change_size(); $(window).on('resize', function (event) { event.preventDefault(); change_size(); }); /***滚动鼠标**/ $(document).mousewheel(function (event, delta) { if (canscroll) { //限制滚动 canscroll = false; $key -= delta; if ($key < 0) { $key = 0 } else if ($key > 6) { $key = 7; canscroll = true; return; } console.log($key); //滚动页面 $("body,html").stop().animate({ "scrollTop": $(".main_box>div").eq($key).offset().top - 120 }, 700, function () { //释放滚动条 canscroll = true; }); //添加菜单当前色 $(".nave ul li").eq($key).addClass('current').siblings().removeClass('current'); }; }) /*****点击侧边菜单***/ $(".nave ul li").click(function (event) { $key = $(this).index(); $(".nave ul li").eq($(this).index()).addClass('current').siblings().removeClass('current'); $("body,html").stop().animate({ "scrollTop": $(".main_box>div").eq($(this).index()).offset().top - 120 }, 700); });});//动态设置大小function change_size() { var window_height = $(window).height(); $(".nave").height(window_height - 120); var size = Number($(".nave ul li").size()); $(".nave ul li").css({ 'line-height': $(".nave").height() / size + "px", 'height': $(".nave").height() / size + "px" }); $(".main_box>div").height(window_height - 120); $("body,html").stop().animate({ "scrollTop": $(".main_box>div").eq($key).offset().top - 120 }, 700, function () { //释放滚动条 canscroll = true; }); //添加菜单当前色 $(".nave ul li").eq($key).addClass('current').siblings().removeClass('current');}

在线演示        积分下载        6毛下载        砍两刀下载