摘自支付宝网站生活助手导航代码
<!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>
<title>摘自支付宝网站生活助手导航代码_网页代码站(www.webdm.cn)</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.webdm.cn/images/20100920/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.webdm.cn/images/20100920/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.webdm.cn/images/20100920/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.webdm.cn/images/20100920/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.webdm.cn/images/20100920/index-icon1.jpg)
}
.svc .content A.icon2 {
BACKGROUND-IMAGE: url(http://www.webdm.cn/images/20100920/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.webdm.cn/images/20100920/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>
</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.webdm.cn/images/20100920/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>
<!-- 个人版框架底部CMS 开始 -->
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/35c81dda-cc65-4ef4-b6b0-3f245efcedca.html
代码内容：
