首页 > 代码库 > 自写原生jq滚轮插件
自写原生jq滚轮插件
自己仿bootStarp插件写的,思路局限,仅供交流,有好的建议还请不吝赐教
//使用方法:
//html:需要ul>li>a的模式,a需要类名,需要设置page-scroll属性,page-scroll属性需要1以数字结尾,容器为所变化的最大页面
//js:请传入一个事件对象,对象需要传入属性:pageAnchorName(锚点id)及contianer(容器类)
//下标jq对象传入$navIndex属性,改变下标样式请传入类名navClass
//最近较为忙碌,有时间还会继续优化代码
!function($){ // jquery 兼容的滚轮事件 var nav_obj={ contianer:document.querySelectorAll(".contianer"), pageAnchorName:"banner", $navIndex:$(".banner_navA"), navClass:"bannerChose", Number:1, } var isScroll=false;//加一个判断断指针,以用来判断无论鼠标在单次无论滚动多少次,都只实现一次++或-- var pagenum=nav_obj.Number; var navClass=nav_obj.navClass; var $htmlbody = $("html,body"); var $navIndex=nav_obj.$navIndex jQuery.scrollTo=function(obj,scrolltime){ $($navIndex).click(function(){ var scrollToDom=$(this).attr("page-scroll"); var tranNum=scrollToDom; pagenum=Number(tranNum.replace((/[^0-9]/g),"")); // console.log(pagenum) $navIndex.eq(pagenum-1).addClass(navClass).parent().siblings("li").find("a").removeClass(navClass); $navIndex.eq(pagenum-1).parents().removeClass("liHover").siblings("li").addClass("liHover"); //由于暂时没有考虑动态创建,请按默认样式布局ul>li.liHiver>a.naveClass $htmlbody.animate( { scrollTop:$(scrollToDom).offset().top }, scrolltime ); return false; }); }; $.scrollTo($navIndex,1000); $(window).on("mousewheel DOMMouseScroll", function (e) { var e=e||window.event; var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));//firfox $(window).trigger("scrollchangePageScroll", [delta, nav_obj]) }); $(window).on("scrollchangePageScroll", function (e,delta, nav_obj){ var constructor=nav_obj; var pageName= constructor.pageAnchorName // console.log(delta) if (delta > 0) { // 向上滚 //console.log("wheelup"); if(pagenum<=1){ pagenum=1; }else{ if(isScroll==false){ isScroll=true; pagenum--; } } } else { // 向下滚 //console.log("wheeldown"); if(pagenum>=nav_obj.contianer.length){ pagenum=nav_obj.contianer.length; }else{ if(isScroll==false){ isScroll=true; //console.log(isScroll) pagenum++; // console.log(pagenum) } } // if($htmlbody.scrollTop()==) } // console.log(pagenum) changeBg(constructor,pagenum); function changeBg(constructor,num){ // console.log("#"+pageName+""+ num + " ") if($htmlbody.is(":animated")){ }else{ constructor.$navIndex.eq(num-1).addClass(constructor.navClass).parent().siblings("li").find("a").removeClass(constructor.navClass); constructor.$navIndex.eq(num-1).parents().removeClass("liHover").siblings("li").addClass("liHover"); $htmlbody.animate({scrollTop:$("#"+pageName+""+ num + " ").offset().top},600,"swing", function () { isScroll=false; }); } } }(jQuery);
自写原生jq滚轮插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。