摘自支付宝网站生活助手导航代码-导航菜单类
来源：互联网 发布：横颜しか知らない 编辑：程序博客网 时间：2024/04/28 07:58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>摘自支付宝<a href='http://web.zz5u.net'><u>网站</u></a>生活助手导航代码 - www.6a8a.com</title><style type=text/css> BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;FONT: 12px/1.2 Tahoma,Helvetica,Arial,Simsun,sans-serif;}h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}EM {FONT-WEIGHT: normal; FONT-STYLE: normal;FONT-WEIGHT: bold;}ul li{list-style-type:none}BODY {BACKGROUND: url(http://www.6a8a.com/images/index-bg.jpg) repeat-x; OVERFLOW-X: hidden}#container {WIDTH: 100%;}.content {MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 950px; ZOOM: 1; POSITION: relative}.lanrentuku {HEIGHT: 320px;;padding-top:20px;text-align:center;}.svc-title {PADDING-LEFT: 50px; FONT-SIZE: 14px; COLOR: #676b69; HEIGHT: 30px}.svc {HEIGHT: 123px}.svc .nav-left {Z-INDEX: 99; FLOAT: left; WIDTH: 40px; POSITION: relative; HEIGHT: 100%}.svc .nav-left A {MARGIN-TOP: 40px; DISPLAY: block; BACKGROUND: url(http://www.6a8a.com/images/index-sprite.png) no-repeat 0px -9px; OVERFLOW: hidden; WIDTH: 24px; COLOR: #828282; TEXT-INDENT: -99px; LINE-HEIGHT: 20px; POSITION: absolute; HEIGHT: 23px; TEXT-DECORATION: none}.svc .nav-left A:hover {BACKGROUND-POSITION: 0px -33px; WIDTH: 47px; TEXT-INDENT: 18px; TEXT-DECORATION: none}.svc .nav-right {Z-INDEX: 99; FLOAT: right; WIDTH: 40px; POSITION: relative; HEIGHT: 100%}.svc .nav-right A {MARGIN-TOP: 40px; DISPLAY: block; RIGHT: 0px; BACKGROUND: url(http://www.6a8a.com/images/index-sprite.png) no-repeat -50px -34px; OVERFLOW: hidden; WIDTH: 24px; COLOR: #828282; TEXT-INDENT: -99px; LINE-HEIGHT: 20px; POSITION: absolute; HEIGHT: 23px; TEXT-DECORATION: none}.svc .nav-right A:hover {BACKGROUND-POSITION: -27px -10px; WIDTH: 47px; TEXT-INDENT: 8px}.svc .nav-right EM {COLOR: #009dcf}.svc .nav-left EM {COLOR: #009dcf}.svc .container {FLOAT: left; OVERFLOW: hidden; WIDTH: 870px; POSITION: relative; HEIGHT: 100%}.svc .content {LEFT: 0px; OVERFLOW: hidden; ZOOM: 1; POSITION: absolute; TOP: 0px; HEIGHT: 100%}.svc .content UL {HEIGHT: 100%}.svc .content LI {FLOAT: left; MARGIN-LEFT: 7px; HEIGHT: 100%}.svc .content LI.first {MARGIN-LEFT: 0px}.svc .content LI.current {BACKGROUND: url(http://www.6a8a.com/images/index-sprite.png) no-repeat 5px 113px}.svc .content A {DISPLAY: block; FLOAT: left; MARGIN: 14px auto 0px; WIDTH: 90px; TEXT-INDENT: -9999px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 94px; TEXT-DECORATION: none; outline: none}.svc .content A.icon1 {BACKGROUND-IMAGE: url(http://www.6a8a.com/images/index-icon1.jpg)}.svc .content A.icon2 {BACKGROUND-IMAGE: url(http://www.6a8a.com/images/index-icon2.jpg)}.svc .content A.svc-weg {BACKGROUND-POSITION: -810px 0px}.svc .content A.svc-weg:hover {BACKGROUND-POSITION: -810px -94px}.svc .content A.svc-tx {BACKGROUND-POSITION: -540px 0px}.svc .content A.svc-tx:hover {BACKGROUND-POSITION: -540px -94px}.svc .content A.svc-credit {BACKGROUND-POSITION: -270px 0px}.svc .content A.svc-credit:hover {BACKGROUND-POSITION: -270px -94px}.svc .content A.svc-gathering {BACKGROUND-POSITION: -720px 0px}.svc .content A.svc-gathering:hover {BACKGROUND-POSITION: -720px -94px}.svc .content A.svc-payment {BACKGROUND-POSITION: -630px 0px}.svc .content A.svc-payment:hover {BACKGROUND-POSITION: -630px -94px}.svc .content A.svc-escore {BACKGROUND-POSITION: -180px 0px}.svc .content A.svc-escore:hover {BACKGROUND-POSITION: -180px -94px}.svc .content A.svc-rent {BACKGROUND-POSITION: -360px 0px}.svc .content A.svc-rent:hover {BACKGROUND-POSITION: -360px -94px}.svc .content A.svc-cashgift {BACKGROUND-POSITION: -450px 0px}.svc .content A.svc-cashgift:hover {BACKGROUND-POSITION: -450px -94px}.svc .content A.svc-aa {BACKGROUND-POSITION: 0px 0px}.svc .content A.svc-aa:hover {BACKGROUND-POSITION: 0px -94px}.svc .content A.svc-donate {BACKGROUND-POSITION: -90px 0px}.svc .content A.svc-donate:hover {BACKGROUND-POSITION: -90px -94px}.svc .content A.svc-hotel {BACKGROUND-POSITION: 0px 0px}.svc .content A.svc-hotel:hover {BACKGROUND-POSITION: 0px -94px}.svc .content A.svc-lottery {BACKGROUND-POSITION: -180px 0px}.svc .content A.svc-lottery:hover {BACKGROUND-POSITION: -180px -94px}.svc .content A.svc-flight {BACKGROUND-POSITION: -270px 0px}.svc .content A.svc-flight:hover {BACKGROUND-POSITION: -270px -94px}.svc .content A.svc-game {BACKGROUND-POSITION: -450px 0px}.svc .content A.svc-game:hover {BACKGROUND-POSITION: -450px -94px}.svc .content A.svc-mobile {BACKGROUND-POSITION: -360px 0px}.svc .content A.svc-mobile:hover {BACKGROUND-POSITION: -360px -94px}.svc .content A.svc-insurance {BACKGROUND-POSITION: -90px 0px}.svc .content A.svc-insurance:hover {BACKGROUND-POSITION: -90px -94px}.svc-content {PADDING-RIGHT: 0px; PADDING-LEFT: 50px; PADDING-BOTTOM: 60px; PADDING-TOP: 30px}.svc-content H4 {PADDING-RIGHT: 20px; FONT-SIZE: 30px; FLOAT: left; FONT-FAMILY: "微软雅黑","黑体",sans-serif; HEIGHT: 40px}.svc-content H5 {FONT-SIZE: 20px; COLOR: #999; LINE-HEIGHT: 50px; FONT-FAMILY: "微软雅黑","黑体",sans-serif}.svc-content .exp {FONT-SIZE: 16px; COLOR: #9e9f9f; LINE-HEIGHT: 40px; HEIGHT: 40px}.svc-content .exp A {FONT-SIZE: 14px}.svc-content .exp A.btn {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(http://www.6a8a.com/images/index-sprite.png) no-repeat 0px -57px; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px}.svc-content .exp A.btn:hover {TEXT-DECORATION: none}.banner {HEIGHT: 289px}.banner .ad {PADDING-LEFT: 65px; PADDING-TOP: 131px} </style></head><BODY><div class="lanrentuku"><p></p><p></p></div><DIV id=container><DIV class=content><DIV class=svc-title>支付宝页面代码</DIV><DIV class=svc><DIV class=nav-left><A href="#"><EM>1</EM>/2</A> </DIV><DIV class=container><DIV class=content><UL> <LI class="first current"><A class="svc-payment icon1" hideFocus href="#" seed="lf-index-payment" data-type="svc-04">我要付款</A> </LI> <LI><A class="svc-gathering icon1" hideFocus href="#" seed="lf-index-gathering" data-type="svc-03">我要收款</A> </LI> <LI><A class="svc-weg icon1" hideFocus href="#" seed="lf-index-jiaofei" data-type="svc-01">水电煤</A> </LI> <LI><A class="svc-tx icon1" hideFocus href="#" seed="lf-index-tx" data-type="svc-10">通讯费</A> </LI> <LI><A class="svc-credit icon1" hideFocus href="#" seed="lf-index-credit" data-type="svc-02">信用卡还款</A> </LI> <LI><A class="svc-aa icon1" hideFocus href="#" seed="lf-index-aa" data-type="svc-08">AA收款</A> </LI> <LI><A class="svc-donate icon1" hideFocus href="#" seed="lf-index-donate" data-type="svc-09">爱心捐赠</A> </LI> <LI><A class="svc-mobile icon2" hideFocus href="#" seed="lf-index-mobile" data-type="svc-15">手机费</A> </LI> <LI><A class="svc-escore icon1" hideFocus href="#" seed="lf-index-escore" data-type="svc-05">担保交易收款</A> </LI> <LI><A class="svc-rent icon1" hideFocus href="#" seed="lf-index-rent" data-type="svc-06">交房租</A> </LI> <LI><A class="svc-cashgift icon1" hideFocus href="#" seed="lf-index-cashgift" data-type="svc-07">送礼金</A> </LI> <LI><A class="svc-insurance icon2" hideFocus href="#" seed="lf-index-insurance" data-type="svc-16">买保险</A> </LI> <LI><A class="svc-flight icon2" hideFocus href="#" seed="lf-index-flight" data-type="svc-13">买机票</A> </LI> <LI><A class="svc-hotel icon2" hideFocus href="#" seed="lf-index-hotel" data-type="svc-11">订酒店</A> </LI> <LI><A class="svc-game icon2" hideFocus href="#" seed="lf-index-game" data-type="svc-14">游戏点卡</A> </LI> <LI><A class="svc-lottery icon2" hideFocus href="#" seed="lf-index-lottery" data-type="svc-12">买彩票</A> </LI></UL></DIV></DIV><DIV class=nav-right><A href="#"><EM>1</EM>/2</A> </DIV></DIV></DIV></DIV><SCRIPT src="http://www.6a8a.com/images/js/arale.js" charset=utf-8></SCRIPT><SCRIPT>E.onDOMReady(function(){//初始化当前产品的内容，默认为全部隐藏var currentLink = D.query('.svc .content li.current a');if(currentLink.length >0){var currentCont = currentLink[0].getAttribute('data-type');D.removeClass(D.get(currentCont),'fn-hide');}//根据icon显示相应的信息function showinfo(li){var target = D.getChildren(li)[0].getAttribute('data-type');D.addClass(D.query('.svc-content .item:not(.fn-hide)'),'fn-hide');D.removeClass(D.get(target),'fn-hide');D.removeClass(D.query('.svc .content li.current'),'current');D.addClass(li,'current');}//点击icon显示相应内容E.on(D.query('.svc .content li'),'mouseover',function(e){E.preventDefault(e);showinfo(this);});//点击左右的滑动效果var index = 1;var end = D.query('.svc .container')[0].offsetWidth;var content = D.query('.svc .content')[0];var list = D.query('li',content);content.style.width = ( list[0].offsetWidth + 7 ) * list.length + 'px';var left = new YAHOO.util.Anim(content,{left:{to:0}},1,YAHOO.util.Easing.easeOut);var right = new YAHOO.util.Anim(content,{left:{to:-end}},1,YAHOO.util.Easing.easeOut);E.on(D.query('.nav-left a'),'click',function(e){E.preventDefault(e);if(index == 2){index = 1;left.animate();D.query('.svc em').forEach(function(o){o.innerHTML = index;});showinfo(list[0]);}});E.on(D.query('.nav-right a'),'click',function(e){E.preventDefault(e);if(index == 1){index = 2;right.animate();D.query('.svc em').forEach(function(o){o.innerHTML = index;});if(list.length >= 10){ //如果第二排的第一个存在，则选中第一个showinfo(list[9]);}}});});</SCRIPT></body></html>
