仿美团菜单代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> </head> <script> var TouchSlide=function(a){a=a||{};var b={slideCell:a.slideCell||"#touchSlide",titCell:a.titCell||".hd li",mainCell:a.mainCell||".bd",effect:a.effect||"left",autoPlay:a.autoPlay||!1,delayTime:a.delayTime||200,interTime:a.interTime||2500,defaultIndex:a.defaultIndex||0,titOnClassName:a.titOnClassName||"on",autoPage:a.autoPage||!1,prevCell:a.prevCell||".prev",nextCell:a.nextCell||".next",pageStateCell:a.pageStateCell||".pageState",pnLoop:"undefined "==a.pnLoop?!0:a.pnLoop,startFun:a.startFun||null,endFun:a.endFun||null,switchLoad:a.switchLoad||null},c=document.getElementById(b.slideCell.replace("#",""));if(!c)return!1;var d=function(a,b){a=a.split(" ");var c=[];b=b||document;var d=[b];for(var e in a)0!=a[e].length&&c.push(a[e]);for(var e in c){if(0==d.length)return!1;var f=[];for(var g in d)if("#"==c[e][0])f.push(document.getElementById(c[e].replace("#","")));else if("."==c[e][0])for(var h=d[g].getElementsByTagName("*"),i=0;i<h.length;i++){var j=h[i].className;j&&-1!=j.search(new RegExp("\\b"+c[e].replace(".","")+"\\b"))&&f.push(h[i])}else for(var h=d[g].getElementsByTagName(c[e]),i=0;i<h.length;i++)f.push(h[i]);d=f}return 0==d.length||d[0]==b?!1:d},e=function(a,b){var c=document.createElement("div");c.innerHTML=b,c=c.children[0];var d=a.cloneNode(!0);return c.appendChild(d),a.parentNode.replaceChild(c,a),m=d,c},g=function(a,b){!a||!b||a.className&&-1!=a.className.search(new RegExp("\\b"+b+"\\b"))||(a.className+=(a.className?" ":"")+b)},h=function(a,b){!a||!b||a.className&&-1==a.className.search(new RegExp("\\b"+b+"\\b"))||(a.className=a.className.replace(new RegExp("\\s*\\b"+b+"\\b","g"),""))},i=b.effect,j=d(b.prevCell,c)[0],k=d(b.nextCell,c)[0],l=d(b.pageStateCell)[0],m=d(b.mainCell,c)[0];if(!m)return!1;var N,O,n=m.children.length,o=d(b.titCell,c),p=o?o.length:n,q=b.switchLoad,r=parseInt(b.defaultIndex),s=parseInt(b.delayTime),t=parseInt(b.interTime),u="false"==b.autoPlay||0==b.autoPlay?!1:!0,v="false"==b.autoPage||0==b.autoPage?!1:!0,w="false"==b.pnLoop||0==b.pnLoop?!1:!0,x=r,y=null,z=null,A=null,B=0,C=0,D=0,E=0,G=/hp-tablet/gi.test(navigator.appVersion),H="ontouchstart"in window&&!G,I=H?"touchstart":"mousedown",J=H?"touchmove":"",K=H?"touchend":"mouseup",M=m.parentNode.clientWidth,P=n;if(0==p&&(p=n),v){p=n,o=o[0],o.innerHTML="";var Q="";if(1==b.autoPage||"true"==b.autoPage)for(var R=0;p>R;R++)Q+="<li>"+(R+1)+"</li>";else for(var R=0;p>R;R++)Q+=b.autoPage.replace("$",R+1);o.innerHTML=Q,o=o.children}"leftLoop"==i&&(P+=2,m.appendChild(m.children[0].cloneNode(!0)),m.insertBefore(m.children[n-1].cloneNode(!0),m.children[0])),N=e(m,'<div class="tempWrap" style="overflow:hidden; position:relative;"></div>'),m.style.cssText="width:"+P*M+"px;"+"position:relative;overflow:hidden;padding:0;margin:0;";for(var R=0;P>R;R++)m.children[R].style.cssText="display:table-cell;vertical-align:top;width:"+M+"px";var S=function(){"function"==typeof b.startFun&&b.startFun(r,p)},T=function(){"function"==typeof b.endFun&&b.endFun(r,p)},U=function(a){var b=("leftLoop"==i?r+1:r)+a,c=function(a){for(var b=m.children[a].getElementsByTagName("img"),c=0;c<b.length;c++)b[c].getAttribute(q)&&(b[c].setAttribute("src",b[c].getAttribute(q)),b[c].removeAttribute(q))};if(c(b),"leftLoop"==i)switch(b){case 0:c(n);break;case 1:c(n+1);break;case n:c(0);break;case n+1:c(1)}},V=function(){M=N.clientWidth,m.style.width=P*M+"px";for(var a=0;P>a;a++)m.children[a].style.width=M+"px";var b="leftLoop"==i?r+1:r;W(-b*M,0)};window.addEventListener("resize",V,!1);var W=function(a,b,c){c=c?c.style:m.style,c.webkitTransitionDuration=c.MozTransitionDuration=c.msTransitionDuration=c.OTransitionDuration=c.transitionDuration=b+"ms",c.webkitTransform="translate("+a+"px,0)"+"translateZ(0)",c.msTransform=c.MozTransform=c.OTransform="translateX("+a+"px)"},X=function(a){switch(i){case"left":r>=p?r=a?r-1:0:0>r&&(r=a?0:p-1),null!=q&&U(0),W(-r*M,s),x=r;break;case"leftLoop":null!=q&&U(0),W(-(r+1)*M,s),-1==r?(z=setTimeout(function(){W(-p*M,0)},s),r=p-1):r==p&&(z=setTimeout(function(){W(-M,0)},s),r=0),x=r}S(),A=setTimeout(function(){T()},s);for(var c=0;p>c;c++)h(o[c],b.titOnClassName),c==r&&g(o[c],b.titOnClassName);0==w&&(h(k,"nextStop"),h(j,"prevStop"),0==r?g(j,"prevStop"):r==p-1&&g(k,"nextStop")),l&&(l.innerHTML="<span>"+(r+1)+"</span>/"+p)};if(X(),u&&(y=setInterval(function(){r++,X()},t)),o)for(var R=0;p>R;R++)!function(){var a=R;o[a].addEventListener("click",function(){clearTimeout(z),clearTimeout(A),r=a,X()})}();k&&k.addEventListener("click",function(){(1==w||r!=p-1)&&(clearTimeout(z),clearTimeout(A),r++,X())}),j&&j.addEventListener("click",function(){(1==w||0!=r)&&(clearTimeout(z),clearTimeout(A),r--,X())});var Y=function(a){clearTimeout(z),clearTimeout(A),O=void 0,D=0;var b=H?a.touches[0]:a;B=b.pageX,C=b.pageY,m.addEventListener(J,Z,!1),m.addEventListener(K,$,!1)},Z=function(a){if(!H||!(a.touches.length>1||a.scale&&1!==a.scale)){var b=H?a.touches[0]:a;if(D=b.pageX-B,E=b.pageY-C,"undefined"==typeof O&&(O=!!(O||Math.abs(D)<Math.abs(E))),!O){switch(a.preventDefault(),u&&clearInterval(y),i){case"left":(0==r&&D>0||r>=p-1&&0>D)&&(D=.4*D),W(-r*M+D,0);break;case"leftLoop":W(-(r+1)*M+D,0)}null!=q&&Math.abs(D)>M/3&&U(D>-0?-1:1)}}},$=function(a){0!=D&&(a.preventDefault(),O||(Math.abs(D)>M/10&&(D>0?r--:r++),X(!0),u&&(y=setInterval(function(){r++,X()},t))),m.removeEventListener(J,Z,!1),m.removeEventListener(K,$,!1))};m.addEventListener(I,Y,!1)}; </script> <style type="text/css"> body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; } img { border:0; margin: 0; padding: 0; } body { color: #000; -webkit-user-select: none; -webkit-text-size-adjust: none; font:normal 16px/200% "微软雅黑", helvetica, arial; text-align:left; } header, section, footer { display: block; margin: 0; padding: 0 } a{text-decoration:none;color:#000;} body{ background:#f4f4f4; } #content{ padding:10px 0; background:#fff; } .path{ padding:0 0 5px 5px; } .picScroll{ margin:10px auto; text-align:center;background-color:#fff; } .picScroll .bd ul{ width:100%; float:left; padding-top:10px; padding-bottom:10px } .picScroll .bd li{ width:25%; height:90px; float:left; font-size:14px; text-align:center; } .picScroll .bd li a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0); } .picScroll .bd li img{ width:50px; height:50px; background:url(images/loading.gif) #fff center center no-repeat; } .picScroll .hd{ height:20px; line-height:20px; border-bottom:0px solid #067CDF; background:#f6f6f6; overflow:hidden; text-align:left; padding:0 10px; } .picScroll .hd ul{ float:right; padding-top:5px; padding-right:46% } .picScroll .hd li{ float:left; width:8px; height:8px; background:#D0D0D0; margin:0 5px; overflow:hidden; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; font-size:0px; } .picScroll .hd .on{ background:#DF7106; } .picScroll .prev,.picScroll .next{ display:block; float:right; width:18px; height:18px; background:url(images/pisScrollIcons.gif) -6px -7px no-repeat; overflow:hidden; margin:11px 5px 0 5px; } .picScroll .next{ background-position:-34px -7px; } .picScroll .prevStop{ background-position:-6px -40px; } .picScroll .nextStop{ background-position:-34px -40px; } </style> <body> <div id="picScroll" class="picScroll"> <div class="bd"> <ul> <li><a href="http://sgh.aimovie.org/club/forum/Vuop7QDJA2DjFPoU"><img _src="http://pic.kuaizhan.com/g1/M01/83/E3/CgpQU1cFzF2AUr5gAAAffV5k4LI0062442/imageView/v1/thumbnail/640x0" /><br>总交流区</a></li> <li><a href="http://sgh.aimovie.org/club/forum/VuorUmGHoFaR6aUn"><img _src="http://pic.kuaizhan.com/g1/M00/53/18/CgpQU1aGdm2ABKtOAAAoUOvMips772.png" /><br>公告通知</a></li> <li><a href="http://sgh.aimovie.org/club/forum/Vurbmejp7yQizhxu"><img _src="http://pic.kuaizhan.com/g1/M01/7F/F1/wKjmqVb59cyAUgZgAAA7H7ZCMkY7965625" /><br>失物联盟</a></li> <li><a href="http://aimovie.org/zb/"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/CgpQU1T27HmAXrcsAAAvgk9tD883780138" /><br>装逼神器</a></li> <li><a href="http://sgh.aimovie.org/pc/?url=/40/55/p33084072037bf5"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/CgpQU1T27HmAbXoIAAAhKIGJKqQ5027112" /><br>生活服务</a></li> <li><a href="http://sgh.aimovie.org/pc/?url=/30/70/p3338880097f5f4"><img _src="http://pic.kuaizhan.com/g1/M00/84/85/wKjmqVcHDG2AYxeBAACC1abjXVo5300893" /><br>校园3D</a></li> <li><a href="http://sgh.aimovie.org/pc/?url=/6/84/p332395809567a4"><img _src="http://pic.kuaizhan.com/g2/M00/85/EF/wKjmqlcHC6-AZ-mrAAAl6nkrLWc5035866" /><br>校区官网</a></li> <li><a href="http://sgh.aimovie.org/pc/?url=/13/61/p334746120d1d32"><img _src="http://pic.kuaizhan.com/g1/M01/8F/62/CgpQU1cjFuKAVV_MAAA-leAYIkY4120852" /><br>社区论坛</a></li> </ul> <ul> <li><a href="http://nc.meituan.com/dianying/?mtt=1.index%2Ffloornew.nc.7.io1aa1u8"><img _src="http://pic.kuaizhan.com/g2/M00/80/9A/wKjmqlb4-iuASa4SAADWLxrNMm81946128/imageView/v1/thumbnail/640x0/imageView/v1/thumbnail/640x0" /><br>最新电影</a></li> <li><a href="http://sgh.aimovie.org/pc/?url=/16/75/p330729207c4707"><img _src="http://pic.kuaizhan.com/g1/M00/10/48/wKjmqVT27HmAEGuGAAAezWVttcE6919591" /><br>软件下载</a></li> <li><a href="http://aimovie.org/sghgame"><img _src="http://pic.kuaizhan.com/g2/M00/6A/05/CgpQVFavQX-AX84fAAAOYLdmFEk8235151/imageView/v1/thumbnail/640x0" /><br>游戏乐园</a></li> <li><a href="#"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/CgpQU1T27HmAXrcsAAAvgk9tD883780138" /><br>菜单</a></li> <li><a href="#"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/CgpQU1T27HmAbXoIAAAhKIGJKqQ5027112" /><br>菜单</a></li> <li><a href="#"><img _src="http://pic.kuaizhan.com/g1/M00/10/48/wKjmqVT27HmAEGuGAAAezWVttcE6919591" /><br>菜单</a></li> <li><a href="#"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/wKjmqVT27HmAIVVCAAAgRbHCMz00202186" /><br>菜单</a></li> <li><a href="#"><img _src="http://pic.kuaizhan.com/g1/M01/10/48/CgpQU1T27HmAXrcsAAAvgk9tD883780138" /><br>菜单</a></li> </ul> </div> <div class="hd"> <ul></ul> <h4></h4> </div> </div> <script type="text/javascript"> TouchSlide({ slideCell:"#picScroll", titCell:".hd ul", autoPage:true, pnLoop:"false", switchLoad:"_src" }); </script> </body> </html>
效果图：
仿美团菜单代码 - 小小鱼儿小小林 - 小小鱼儿小小林的网易博客
