div横向模拟滚动条 带懒加载

之前工作需要,在网上找了一个横向的div模拟滚动条的方法,后来有自己改动了下,在相关js中加了一个懒加载的方法,贴出来大家一起学习下

首先贴出相当于插件的scrolltools.js

var indexR=0;//全局变量,懒加载用var tempBool = false;var flagT="";var flagLoad="";(function(){if(!window.zzc){window['zzc'] = {} };function isIE(){ return (document.all) ? true : false;};window['zzc']['isIE'] = isIE;function $(id){return typeof id == 'string' ? document.getElementById(id) : id};window['zzc']['$'] = $;function $$(id,tag){return $(id).getElementsByTagName(tag);}window['zzc']['$$'] = $$;function getElementsByClassName(name,type){var r=[];var re=new RegExp("(^|\\s)"+name+"(\\s|$)");var elem=document.getElementsByTagName(type||"*");for(var i=0;i<elem.length;i++){if(re.test(elem[i].className)) r.push(elem[i]);}return r;}window['zzc']['getElementsByClassName'] = getElementsByClassName; function addEvent(eventTarget,eventType,fnHandler){if(eventTarget.addEventListener){//for FFeventTarget.addEventListener (eventType,fnHandler,false);} else if(eventTarget.attachEvent){//for IEeventTarget.attachEvent("on" + eventType,fnHandler);} else{//for othereventTarget["on" + eventType] = fnHandler;}};window['zzc']['addEvent'] = addEvent;function removeEvent(eventTarget,eventType,fnHandler){if(eventTarget.removeEventListener){//for FFeventTarget.removeEventListener (eventType,fnHandler,false);} else if(eventTarget.detachEvent){//for IEeventTarget.detachEvent("on" + eventType,fnHandler);} else{//for othereventTarget["on" + eventType] = null;}};window['zzc']['removeEvent'] = removeEvent;function getBrowerWindowSize(){var de = document.documentElement;return{ 'width':(self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth),'height':(self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight)}};window['zzc']['getBrowerWindowSize'] = getBrowerWindowSize;function getPageSize(){var de=document.documentElement;return{'width':(document.body.scrollWidth||(de&&de.scrollWidth)),'height':(document.body.scrollHeight||(de&&de.scrollHeight))} };window['zzc']['getPageSize'] = getPageSize; function pageX(elem){return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;}window['zzc']['pageX'] = pageX; function pageY(elem){return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;}window['zzc']['pageY'] = pageY;})();function Drag(activeObj,dragObj,options){var aObj = zzc.$(activeObj);//激活元素var dObj = zzc.$(dragObj);//拖动元素var iDiffX = 0;var iDiffY = 0;var Options = options || {};var Limit = Options.Limit||false;var mxLeft = parseInt(Options.mxLeft)||0;//左边限制var mxRight = parseInt(Options.mxRight)||0;//右边限制var mxTop = parseInt(Options.mxTop)||0;//上边限制var mxBottom = parseInt(Options.mxBottom)||0;//下边限制var onMove = Options.onMove||function(){};//移动时执行 (function start(){ zzc.addEvent(aObj,'mousedown',handleMouseDown);})();function handleMouseMove(oEvent){ var oEvent = window.event || arguments[0];var iLeft = oEvent.clientX - iDiffX, iTop = oEvent.clientY - iDiffY;if(Limit){var iRight = iLeft + dObj.offsetWidth - mxRight, iBottom = iTop + dObj.offsetHeight - mxBottom;if(iRight > 0) iLeft -= iRight;if(iBottom > 0) iTop -= iBottom;if(mxLeft > iLeft) iLeft = mxLeft;if(mxTop > iTop) iTop = mxTop;}dObj.style.left = iLeft + 'px';//dObj.style.top = iTop + 'px';<span style="color: #800000;"><strong>//懒加载方法执行的判断,距离右侧边距多少时进行加载数据</strong></span>if(iLeft>=(document.body.clientWidth*0.7)){if(tempBool){searchAjaxAll();//searchProgramAjax(365,indexR,'','append');tempBool = false;}if(flagLoad){dObj.style.left = (iLeft-100) + 'px';}else{dObj.style.left = iLeft+ 'px';}}onMove();};function handleMouseDown(oEvent){tempBool = true;//清除选择(ie设置捕获后默认带这个)window.getSelection && window.getSelection().removeAllRanges();var oEvent = window.event || arguments[0];dObj.style.position = "absolute"; iDiffX = oEvent.clientX - dObj.offsetLeft;iDiffY = oEvent.clientY - dObj.offsetTop;zzc.addEvent(document,'mousemove',handleMouseMove);zzc.addEvent(document,'mouseup',handleMouseUp);if(zzc.isIE()){zzc.addEvent(dObj, "losecapture", handleMouseUp);dObj.setCapture();}else{zzc.addEvent(window, "blur", handleMouseUp);}};//鼠标松开function handleMouseUp(){tempBool = false;zzc.removeEvent(document,'mousemove',handleMouseMove);zzc.removeEvent(document,'mouseup',handleMouseUp); if(zzc.isIE()){zzc.removeEvent(dObj, "losecapture", handleMouseUp);dObj.releaseCapture();}else{zzc.removeEvent(window, "blur", handleMouseUp);} };}//使图片滚动。function picSlideByDrag(picBox,picList,dragObj,options){var Options = options || {};var mxLeft = parseInt(Options.mxLeft)||0;//左边限制var mxRight = parseInt(Options.mxRight)||0;//右边限制var mxTop = parseInt(Options.mxTop)||0;//上边限制var mxBottom = mxTop + dragObj.clientHeight;//下边限制function init(){var picListChild = zzc.$$(picList,'li');//li元素个数var picListWidth = picListChild.length * picListChild[0].offsetWidth;//ul加载宽度// if(indexR==0){// dragObj.style.left='225px';// }picList.style.width = picListWidth + 'px';if(picListWidth <= picBox.clientWidth){ //ul中的li元素的总宽度不大于div宽度，滚动条不显示dragObj.style.display = "none";}else{dragObj.style.display = "block";}};function picSlide(){//图片滑动picList.style.left = -(((zzc.pageX(dragObj) - mxLeft)/(mxRight-mxLeft-dragObj.clientWidth))*(picList.clientWidth-picBox.clientWidth)) + "px";};init();Drag(dragObj,dragObj,{Limit:true,mxTop:mxTop,mxRight:mxRight,mxBottom:mxBottom,mxLeft:mxLeft,onMove:picSlide});};//静态页面数据可以用此方法//window.onload = function(){//searchClassify();//var picBox = zzc.$("picBox");// var picList = zzc.$("picList");// var scrollBar = zzc.$("scrollBar");// var dragObj = zzc.$("dragObj");// var initTop = zzc.pageY(scrollBar) + 1;// var initLeft = zzc.pageX(scrollBar) + 1;// var initRight = initLeft + scrollBar.clientWidth;// picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});//}//动态数据获取用此方法加载计算滚动条的宽度以及其他参数值,主要参数是picBoxid,picListid,scrollBarid,dragObjid//后面的flag,flag2是页面上具体情况判断加上的,没有去掉是提示看客们可以自己根据需要添加参数function ScrollLoad(picBoxid,picListid,scrollBarid,dragObjid,flag,flag2){var picBox = zzc.$(picBoxid);var picList = zzc.$(picListid);var scrollBar = zzc.$(scrollBarid);var dragObj = zzc.$(dragObjid);var initTop = zzc.pageY(scrollBar) + 1;var initLeft = zzc.pageX(scrollBar) + 1;var initRight = initLeft + scrollBar.clientWidth;flagT=flag;flagLoad=flag2;picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});}//懒加载用到的方法体function searchAjaxAll(){indexR +=1;searchColumn(inputtime,indexR,type,'append');//具体方法,可以根据需要加多个方法}}

调用上面滚动条加载方法ScrollLoad();的Extjs为

function searchColumn(searchTime,searchContent,type){Ext.Ajax.request({url: 'action.do',params: {name:name,id:id},method: 'POST',callback: function (options, success, response) {if (success) {var responseJson = Ext.JSON.decode(response.responseText);if(responseJson.message.length>0){//$('#picList').removeClass('class_ul');//$('#dragObj').css('left',document.body.clientWidth*0.19);//$('#picList').css('left','0px');//上面注释掉的部分是具体页面应用中产生问题的解决方法,供参考,当然没有最好啦fillTableshh('picList_Column',responseJson.message,type);}ScrollLoad('picBox','picList','scrollBar','dragObj','3',flag);} else {Ext.Msg.confirm('失败','请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？', function (btn) {if (btn == 'yes') {Ext.Ajax.request(options);}});}}});}

页面具体:

<div id="picBox" class="picBox"><ul id="picList" class="picList"></ul></div><div id="scrollBar" class="scrollBar"><div id="dragObj" class="dragObj"></div></div>

css样式

.picBox{border: 1px solid #f5f1f1;height: 110px;margin: -10px auto 5px;min-width: 700px;overflow: hidden;padding: 5px;position: relative;width: 70%;}.picBox ul{overflow:hidden;position:absolute; top:4px; left:0;}.picBox li{float: left;height: 114px;line-height: 95px;text-align: center;width: 115px;/*background:url(../img/loading_big.jpg) no-repeat center;*/}.picBox li a{ display:block; width:115px; height:100%; margin:0 auto;text-align:center;overflow:hidden;position:relative;}.picBox li a p{ position: absolute;color: #978f8f; top: 102px; width: 115px; line-height: 12px;font-size: 12px;overflow: hidden; }.picBox li a:HOVER p{ overflow:visible;color:#6885d2;font-size:12px;text-decoration: none;}.scrollBar{background-color: #ccc;border: medium none;border-radius: 5px;height: 10px;margin: 0 auto;min-width: 720px;width: 74%;}.scrollBar .dragObj{ width:100px; height:10px;border-radius: 5px; text-align:center; cursor:pointer; background:#6882ca}

整个流程大概就是这样的,此滚动条不足之处是没有滚动轮滑动的方法,不过网上很多,需要的话可以百度哈