下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"> <HTML xmlns="http:// www.xibaonpx.com"> <head> <Title>【荐】Js+CSS实现用滚动条控制图片水平展示效果_ 潍坊发电机组(www.ouyi168.com">潍坊发电机组)</Title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fIEldset,input,p,blockquote,th,td{margin:0;padding:0;Font-size:12px} table{border-collapse:collapse;border-spacing:0;} fIEldset,img{border:0;} address,caption,cite,code,dfn,em,strong,var{Font-style:normal;Font-weight:normal;}ol,ul {List-style:none;} caption,th {text-align:left;} h1,h6{Font-size:100%;} body{ Font:12px/160% "宋体"} #picBox{wIDth:880px; height:100px; border:#ccc solID 1px; margin:10px auto; padding:10px; overflow:hidden; position:relative;} #picBox ul{overflow:hidden;position:absolute; top:10px; left:0;} #picBox li{ float:left; wIDth:225px; height:100px; line-height:100px; text-align:center;} #picBox li a{ display:block; wIDth:200px; height:100%; margin:0 auto;text-align:center; background:#FF9900;} #scrollbar{ wIDth:900px; height:20px; border:#ccc solID 1px; margin:0 auto} #scrollbar #dragObj{ wIDth:100px; height:20px; text-align:center; cursor:pointer; background:#DDD} </style> </head> <body> <div ID="picBox"> <ul ID="picList"> <li><a href="#">图片地址1</a></li> <li><a href="#">图片地址2</a></li> <li><a href="#">图片地址3</a></li> <li><a href="#">图片地址4</a></li> <li><a href="#">图片地址5</a></li> <li><a href="#">图片地址6</a></li> <li><a href="#">图片地址7</a></li> <li><a href="#">图片地址8</a></li> <li><a href="#">图片地址9</a></li> <li><a href="#">图片地址10</a></li> </ul> </div> <div ID="scrollbar"><div ID="dragObj">拖动</div></div> <script type="text/JavaScript"> (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 FF eventTarget.addEventListener (eventType,fnHandler,false); } else if(eventTarget.attachEvent){//for IE eventTarget.attachEvent("on" + eventType,fnHandler); } else{//for other eventTarget["on" + eventType] = fnHandler; } }; window['zzc']['addEvent'] = addEvent; function removeEvent(eventTarget,fnHandler){ if(eventTarget.removeEventListener){//for FF eventTarget.removeEventListener (eventType,false); } else if(eventTarget.detachEvent){//for IE eventTarget.detachEvent("on" + eventType,fnHandler); } else{//for other eventTarget["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'; onMove(); }; function handleMouseDown(oEvent){ //清除选择(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(){ zzc.removeEvent(document,handleMouseMove); zzc.removeEvent(document,handleMouseUp); if(zzc.isIE()){ zzc.removeEvent(dobj,handleMouseUp); dobj.releaseCapture(); }else{ zzc.removeEvent(window,handleMouseUp); } }; } //使图片滚动。 function picslIDeByDrag(picBox,picList,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'); var picListWIDth = picListChild.length * picListChild[0].offsetWIDth; picList.style.wIDth = picListWIDth + 'px'; if(picListWIDth <= picBox.clIEntWIDth){ dragObj.style.display = "none"; } }; function picslIDe(){ picList.style.left = -(((zzc.pageX(dragObj) - mxleft)/(mxRight-mxleft-dragObj.clIEntWIDth))*(picList.clIEntWIDth-picBox.clIEntWIDth)) + "px"; }; init(); Drag(dragObj,{limit:true,mxtop:mxtop,mxRight:mxRight,mxBottom:mxBottom,mxleft:mxleft,onMove:picslIDe});}; window.onload = function(){ 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,{mxtop:inittop,mxleft:initleft,mxRight:initRight}); } </script> <br /> <p><a href="http://www.ouyi168.com">潍坊发电机组</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的网页效果代码全部内容，希望文章能够帮你解决网页效果代码所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）