摘自支付宝网站生活助手导航代码-导航菜单类

最新推荐文章于 2022-08-22 10:23:37 发布
DracoTianlong
最新推荐文章于 2022-08-22 10:23:37 发布
阅读量1.7k
点赞数
分类专栏： JS 文章标签：生活 class function float url list
本文链接：https://blog.csdn.net/Dracotianlong/article/details/7828230
版权
JS 专栏收录该内容
44 篇文章 0 订阅
订阅专栏
<!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>
DracoTianlong
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
摘自支付宝网站生活助手导航代码-导航菜单类

摘自支付宝网站生活助手导航代码 - www.6a8a.com 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,
复制链接

扫一扫
专栏目录