jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!
更新:1.1版本
1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂
2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由
3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置
4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示
5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度
使用方法:
1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
3、属性说明:
speed滚动速度,必须
scroll_text滚动文本内容class,必须
sWidth滚动条宽度,必须
updownH上下微调按钮高度,必须
scrollbar文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true
text_width滚动文本宽度,可选
leonaScroll-1.0仅供学习参考使用,该版本为本人学习时思路版,尚有不足,新版本修复了很多问题,但仍然存在着二次调用问题。不过已经有了解决方案,只是本人比较赖,没有修复,等待1.2版本修复吧!哈哈!
当然如果有人使用后遇到bug或者不方便的地方,欢迎提出,以便本人继续改进。
学习之余写的小插件,如有什么不足之处,还望见谅。
最后感谢在本插件开发过程中,帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑!
废话不说了,附js代码和下载地址
一、Html+Css
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <metacharset="utf-8"/> <scriptsrc="js/jquery-1.10.2.js"type="text/javascript"></script> <scriptsrc="js/mousewheel.js"type="text/javascript"></script> <scriptsrc="js/leonaScroll-min-1.1.js"type="text/javascript"></script> <styletype="text/css"> .left,.Explain,.center,.welcome,.right,.usage{height:300px;} .left,.Explain,.Explain_text{width:200px;} .right,.usage,.usage_text{width:700px;} .center,.welcome,.welcome_text{width:300px;} .left,.right,.center{padding:10px;padding-right:0;float:left;margin-right:10px;background-color:#cac9c9;} .Explain_text,.welcome_text,.usage_text{font-size:14px;line-height:30px;background-color:#cac9c9;color:#000000;} </style> </head> <body> <divclass="left"> <divclass="Explainsss"> <divclass="Explain_text"> leonaScroll-1.1.js <br/>介绍:是一款基于jquery框架,结合mousewheel插件实现的自定义滚动条 <br/><spanstyle="color:red">(未超出可显示文本区域时,要求显示滚动条)</span> </div> </div> </div> <divclass="center"> <divclass="welcome"> <divclass="welcome_text"> leonaScroll-1.1.js <br/>欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! <br/>作者:leona <br/>发布时间:2016-6-16 <br/>博客:<ahref="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a> <br/><spanstyle="color:red">(未超出可显示文本区域时,默认不显示滚动条)</span> </div> </div> </div> <divclass="right"> <divclass="usage"> <divclass="usage_text"> leonaScroll-1.1.js <br/>欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! <br/>更新:1.1版本 <br/>1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂 <br/>2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由 <br/>3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置 <br/>4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示 <br/>5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度 <br/>使用方法: <br/>1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件 <br/>2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件 <br/>3、属性说明: <br/>speed滚动速度,必须 <br/>scroll_text滚动文本内容class,必须 <br/>sWidth滚动条宽度,必须 <br/>updownH上下微调按钮高度,必须 <br/>scrollbar文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true <br/>text_width滚动文本宽度,可选 </div> </div> </div> <scripttype="text/javascript"> //滚动条调用方法 $(".Explain").LeonaScroll({speed:20,scroll_text:".Explain_text",sWidth:14,updownH:20,scrollbar:false}); $(".welcome").LeonaScroll({speed:20,scroll_text:".welcome_text",sWidth:14,updownH:20}); $(".usage").LeonaScroll({speed:20,scroll_text:".usage_text",sWidth:14,updownH:20}); </script> </body> </html>
二、Jquery
$.fn.extend({ generateUUID:function(){ //唯一ID数值生成 vard=newDate().getTime(); varuuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){ varr=(d+Math.random()*16)%16|0;d=Math.floor(d/16);return(c=='x'?r:(r&0x7|0x8)).toString(16); });returnuuid; }, LeonaScroll:function(parameter){ varSname=$(this).selector; returnthis.each(function(){ //变量声明 varelem=$(this),celem=$(this).find(parameter.scroll_text),index=$(this).generateUUID(),text_hidden=$(elem).height(),con_width=$(elem).width(); //添加滚动条Html varscrollHTML=""; scrollHTML+="<divclass='scroll_upleonaup"+index+"'></div>"; scrollHTML+="<divclass='scroll_cenleonacen"+index+"'><divclass='scroll_buttonleonabutton"+index+"'></div></div>"; scrollHTML+="<divclass='scroll_downleonadown"+index+"'></div>"; $(elem).append("<divclass='scrollleonas"+index+"'>"+scrollHTML+"</div>"); //添加滚动条CSS varscrollStyle=""; scrollStyle+="body{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/user-select:none;}"; scrollStyle+=Sname+"{position:relative;overflow-y:hidden;clear:none}"; scrollStyle+=parameter.scroll_text+"{width:"+(parameter.text_width===undefined?(con_width-parameter.sWidth):parameter.text_width)+"px;word-break:break-word;position:absolute;left:0;top:0;clear:both;}"; scrollStyle+=".scroll{height:"+text_hidden+"px;float:right;}\r\n"; scrollStyle+=".scroll,.scroll.scroll_cen,.scroll.scroll_up,.scroll.scroll_down{width:"+parameter.sWidth+"px;}"; scrollStyle+=".scroll.scroll_up,.scroll.scroll_down{height:"+parameter.updownH+"px;line-height:"+parameter.updownH+"px;color:#ffffff;font-size:12px;font-weight:bold;background-image:url(/img/bw.png);background-color:#161515;background-repeat:no-repeat;cursor:pointer;}"; scrollStyle+=".scroll.scroll_up{background-position:0px6px;border-radius:5px5px00;}"; scrollStyle+=".scroll.scroll_down{background-position:0px-49px;border-radius:005px5px;}"; scrollStyle+=".scroll.scroll_up:hover{background-position:0px-11px;}"; scrollStyle+=".scroll.scroll_down:hover{background-position:0px-31px;}"; scrollStyle+=".scroll.scroll_cen{height:"+(text_hidden-parameter.updownH*2)+"px;background-color:#777676;position:relative;}"; scrollStyle+=".scroll.scroll_cen.scroll_button{width:"+(parameter.sWidth-2)+"px;margin:0px1px;background:url(/img/tiao.jpg)repeat-y00;border-radius:5px;position:absolute;cursor:pointer;}"; $("head").append("<styletype='text/css'>"+scrollStyle+"</style>"); //变量声明 vartext_show=$(celem).height(),scroll_b=$(".leonabutton"+index+""),text_p=text_hidden/text_show,bH_max=$(".leonas"+index+".leonacen"+index+"").height(),bH=text_p*bH_max; if(parameter.scrollbar==true||parameter.scrollbar===undefined){ if(text_p>=1)$(".leonas"+index+"").css("display","none");else{$(".leonas"+index+"").css("display","block");scroll_b.css("height",bH+"px");} }elsereturn; //鼠标拖动div事件 varneedMove=false,mouseY=0; scroll_b.mousedown(function(event){needMove=true;varbH_Top=scroll_b.position().top;mouseY=event.pageY-bH_Top;}); $(document).mouseup(function(event){needMove=false;}); $(document).mousemove(function(event){ if(needMove){ varsMouseY=event.pageY,bH_Top=sMouseY-mouseY,textY=bH_Top/bH_max*text_show; if(bH_Top<=0)scroll_b.css("top",0);$(celem).css("top",0);return; if(bH_Top>=bH_max-bH)scroll_b.css("top",bH_max-bH);$(celem).css("top",text_hidden-text_show);return; scroll_b.css("top",bH_Top);$(celem).css("top",-textY); }return; }); //定义上下滚动规则 functiongoGun(direction,timer){ bH_Top=scroll_b.position().top; varh=0;h+=parameter.speed;//调节滑动速度 if(direction==1){//up varToping=bH_Top-h; if(bH_Top<=0||Toping<=0){ scroll_b.css("top",0);$(celem).css("top",0); if(timer==2)clearInterval(goThread);//needtimer return; } scroll_b.css("top",bH_Top-h); }; if(direction==-1){//down varDowning=bH_Top+h; if(bH_Top>=bH_max-bH||Downing>=bH_max-bH){ scroll_b.css("top",bH_max-bH); $(celem).css("top",text_hidden-text_show); if(timer==2)clearInterval(goThread);//needtimer return; } scroll_b.css("top",bH_Top+h); } vartextY=bH_Top/bH_max*text_show; $(celem).css("top",-textY); }; //上下微调按钮事件 functionminTiao(minTB,d,t){ vargoThread=""; minTB.mouseup(function(){clearInterval(goThread);}); minTB.mousedown(function(){ clearInterval(goThread); goThread=setInterval(function(){goGun(d,t);},300); }); minTB.click(function(){goGun(d);}); }; minTiao($(".leonaup"+index+""),1,2);//up minTiao($(".leonadown"+index+""),-1,2);//down //滚轮事件 if(text_p<1){ $(elem).bind("mousewheel",function(event,delta,deltaX,deltaY){ if(delta==1){//up goGun(1,0); if(scroll_b.position().top!=0) returnfalse; }if(delta==-1){//down goGun(-1,0); if(Math.ceil(scroll_b.position().top)!=Math.ceil(bH_max-bH)) returnfalse; } }); } }); } });
以上所述是小编给大家介绍的jQueryleonaScroll1.1自定义滚动条插件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!