码迷,mamicode.com
首页 > 其他好文 > 详细

自写原生jq滚轮插件

时间:2017-02-15 00:00:56      阅读:364      评论:0      收藏:0      [点我收藏+]

标签:nts   number   ima   jquery   click   origin   javascrip   pre   scrolltop   

自己仿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滚轮插件

标签:nts   number   ima   jquery   click   origin   javascrip   pre   scrolltop   

原文地址:http://www.cnblogs.com/sxcflyhigher/p/6399368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!