一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 综合特效

推荐专题

最新下载

1

我的虚拟世界手机版
82.1MB 类型： 休闲益智
2

玩个锤子手机版
45.69MB 类型： 休闲益智
3

手画摩托车手机版
32.27MB 类型： 休闲益智
4

僵尸人入侵手游
70.8MB 类型： 休闲益智
5

台球帝国vivo账号端
255.6MB 类型： 休闲益智
6

跑酷谁怕谁游戏
62.61MB 类型： 休闲益智
7

饥饿进化鲨最新版
295.19MB 类型： 休闲益智
8

神秘魔法锅免广告版
84.79MB 类型： 休闲益智
9

动物战争世界正式版
62.82MB 类型： 休闲益智
10

双人求生大作战游戏
30.3MB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

阿里巴巴滑动菜单效果代码

时间：2022-07-02 14:13:04 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<style type="text/<a href=" http: target="_blank">css"> 
<title>滑动菜单 ,滑动门菜单,css滑动菜单 ,js 滑动菜单,多普达滑动菜单,滑动菜单怎么弄
/*这里定义样式,由于左右滑动区宽度不同,所以代码略多*/ 
body {margin:0px;border:0px;font-size:12px;background-color:#fff;} 
a:link{color: #003278;text-decoration: none;} 
a:visited{color: #003278;text-decoration: none;} 
a:hover{color: #FF6600;text-decoration: underline;} 
#slideBox{background:url(http://img.china.ali***baba.com/images/cn/home/0110/slideBox_bg.gif);padding-left:5px;padding-right:5px;} 
#slide{padding-top:5px} 
#slide li img{margin-right:3px} 
#slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden} 
#slideBox li{float:left;font-weight:bold;!important;} 
#slideBox li a:link,#slideBox li a:visited{color:#000;} 
#slideBox li a:hover{color:#ff7300;text-decoration: none} 
#slideBox .l{background:url(http://img.chi*n**a.alibaba.com/images/cn/home/0110/slideBox_tableft.gif);} 
#slideBox .r{background:url(http://img.ch*i*na.aliba*ba.com/images/cn/home/0110/slideBox_tabright.gif);float:right} 
#slideBox .l_h{background:url(http://img.c*h*ina.*alibaba.com/images/cn/home/0110/slideBox_tableft_h.gif);} 
#slideBox .r_h{background:url(http://img.c*hi*na.aliba*ba.com/images/cn/home/0110/slideBox_tabright_h.gif);float:right;} 
#slideBox .hide{display:none} 
#slideBox .l a{} 
#slideBox .r a{} 
.arrow{padding-left:8px;background:url(http://img.chi*na.al**ibaba.com/images/cn/common/icon/v2/icon_arrow03_right_08x.gif) no-repeat;} 
#slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;} 
.btn_zchy{background:url(http://img.*china*.alib*aba.com/images/cn/common/icon/v2/icon_zchy01_12x.gif) 5px 10px no-repeat;} 
.btn_cxt{background:url(http://img.*china.ali*b*aba.com/images/cn/common/icon/v2/icon_cxt01_12x.gif) 5px 10px no-repeat;} 
.btn_tggs{background:url(http://img.*c*hina.a*libaba.com/images/cn/common/icon/v2/icon_tggs01_12x.gif) 5px 10px no-repeat;} 
.btn_fbxx{background:url(http://img.c*hina.*al*ibaba.com/images/cn/common/icon/v2/icon_fbxx01_12x.gif) 5px 10px no-repeat;} 
.btn_xzmj{background:url(http://img.c*hina.al*ib*aba.com/images/cn/common/icon/v2/icon_xzmj01_12x.gif) 5px 10px no-repeat;} 
.btn_alisoft{background:url(http://img.*china.al*i*baba.com/images/cn/common/icon/v2/icon_alisoft01_12x.gif) 5px 10px no-repeat;} 
/*cont*/ 
#slideBox .cont_l{float:left;background:url(http://img.china.***alibaba.com/images/cn/home/0110/slideBox_conleft.gif);padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .cont_r{float:left;background:url(http://img.**chin*a.alibaba.com/images/cn/home/0110/slideBox_conright.gif);padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .oneline{line-} 
</style>

<div id="slideBox">
<div id="slide">
  <ul>
	  <li class="l_h">
	  </li>
<li class="r">
  </li>
</ul>
  <div class="cont_l" id="sc_1">
		内容一
  </div>
  <div class="hide" id="sc_2">
		内容一
  </div>
   <ul>
	  <li class="l">
	  </li>
<li class="r">
  </li>
</ul>
   <div class="hide" id="sc_3">
		内容一
  </div>
  <div class="hide" id="sc_4">
	   内容一
</div>
  <ul>
	  <li class="l">
	  </li>
<li class="r">
  </li>
</ul>
  <div class="hide" id="sc_5">
	   内容一
  </div>
  <div class="hide" id="sc_6">
	   内容一
  </div>
</div>    
</div>

<script type="text/javascript">
/*alitab 
author:alicn-wd-ym 
这里是所有js实现,代码比较少,主要还是取巧,利用了classname的关系 
*/ 
var slideTabIndex=1; 
var sTabList = document.getElementById("slideBox").getElementsByTagName("li"); 
for(var i=0;i<sTabList.length;i++){ 
var obj = sTabList[i].getElementsByTagName("a")[0]; 
sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1); 
if (obj.addEventListener) { 
obj.addEventListener( "mouseover", overSlide, false ); 
} 
else if (obj.attachEvent) { 
obj.attachEvent( "onmouseover", overSlide ); 
} 
} 
function overSlide(e){ 
e = window.event || e; 
var srcElement = e.srcElement || e.target; 
var newTabIndex=srcElement.id.replace("slideBtn_",""); 
var pos = srcElement.parentNode.className; 
if(newTabIndex==""||pos.indexOf("_h")!=-1)return; 
document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h",""); 
document.getElementById("sc_"+slideTabIndex).className="hide"; 
document.getElementById("sc_"+newTabIndex).className="cont_"+pos; 
srcElement.parentNode.className = pos+"_h"; 
slideTabIndex=newTabIndex; 
} 
  

</script>

提示：您可以先修改部分代码再运行

相关文章

热门栏目