打印

阿里巴巴的这种效果怎么实现的。

yywzy [楼主]

中级会员

帖子: 90
体力: 306
威望: 0
离线: 36 天

1^# 大中小发表于 2008-1-14 14:55

阿里巴巴的右边角上的这种效果网上说是AJAX技术+滑动门技术实现的，我搜索了一下，有一些是这种效果的感觉，但感觉还是不太一样。请问那个高手能不能给出完整的源代码。拜托了。

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元

vivid817

二猫

初级会员

帖子: 37
体力: 92
威望: 0
离线: 108 天

2^# 大中小发表于 2008-1-14 15:07

这个效果原先有回答过。
具体可以看这里http://www.f-dev.com/38
这里没有使用ajax，直接都是静态的内容，主要是合理利用空间。
yahoo美国原先有这样的ajax应用，效果貌似一样，但本质十万八千里。
如还有任何问题，可以直接问我！

方凳http://f-dev.com

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

yywzy [楼主]

中级会员

帖子: 90
体力: 306
威望: 0
离线: 36 天

3^# 大中小发表于 2008-1-14 15:23

首先感谢vivid817 朋友的忙。

首先感谢vivid817 朋友的忙。
你发的那个文章我看不懂，我抄过去，也没有看到是那种效果，我想在网上向你请教，我的qq:6960275，希望你在网上指导我一下。
蓝色理想真的是人才济济，随便在上面发一条技术信息，马上就有专业人士回答指导，佩服。

TOP

请大家尊重和保护奥运知识产权。

vivid817

二猫

初级会员

帖子: 37
体力: 92
威望: 0
离线: 108 天

4^# 大中小发表于 2008-1-14 16:04

<!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" xml:lang="gb2312">
<style type="text/css"> 
/*这里定义样式,由于左右滑动区宽度不同,所以代码略多*/ 
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.alibaba.com/images/cn/home/0110/slideBox_bg.gif);height:168px;width:178px;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;height:37px !important;height:27px;} 
#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.china.alibaba.com/images/cn/home/0110/slideBox_tableft.gif);width:80px;} 
#slideBox .r{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright.gif);width:94px;float:right} 
#slideBox .l_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft_h.gif);width:80px;} 
#slideBox .r_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright_h.gif);width:94px;float:right;} 
#slideBox .hide{display:none} 
#slideBox .l a{width:52px;} 
#slideBox .r a{width:68px;} 
.arrow{padding-left:8px;background:url(http://img.china.alibaba.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.alibaba.com/images/cn/common/icon/v2/icon_zchy01_12x.gif) 5px 10px no-repeat;} 
.btn_cxt{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_cxt01_12x.gif) 5px 10px no-repeat;} 
.btn_tggs{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_tggs01_12x.gif) 5px 10px no-repeat;} 
.btn_fbxx{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_fbxx01_12x.gif) 5px 10px no-repeat;} 
.btn_xzmj{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_xzmj01_12x.gif) 5px 10px no-repeat;} 
.btn_alisoft{background:url(http://img.china.alibaba.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);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .cont_r{float:left;background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_conright.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .oneline{line-height:33px;} 
</style>

<div id="slideBox">
<div id="slide">
  <ul>
	  <li class="l_h"><a href="http://china.alibaba.com/member/join.htm?tracelog=Reg_TradeToolbar_Index" class="btn_zchy">注册会员</a></li>
	  <li class="r"><a href="http://trust.alibaba.com.cn/index_m.shtml" class="btn_cxt">加入诚信通</a></li>
  </ul>
  <div class="cont_l" id="sc_1">
		内容一
  </div>
  <div class="hide" id="sc_2">
		内容一
  </div>
   <ul>
	  <li class="l"><a href="http://trust.alibaba.com.cn/index_duibi4.shtml" class="btn_tggs">推广公司</a></li>
	  <li class="r"><a href="http://upload.china.alibaba.com/myalibaba/turbine/template/myalibaba,MyCompany" class="btn_fbxx">发布信息</a></li>
  </ul>
   <div class="hide" id="sc_3">
		内容一
  </div>
  <div class="hide" id="sc_4">
	   内容一
</div>
  <ul>
	  <li class="l"><a href="http://info.china.alibaba.com/list/bsd/index.html?tracelog=bsd_cp8" class="btn_xzmj">寻找买家</a></li>
	  <li class="r"><a href="http://alitalk.alibaba.com.cn/?tracelog=alitalk_homepage1" class="btn_alisoft">阿里软件</a></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>

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

方凳http://f-dev.com

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

vivid817

二猫

初级会员

帖子: 37
体力: 92
威望: 0
离线: 108 天

5^# 大中小发表于 2008-1-14 16:07

可以根据需要增加删除tab，注意左右配对，和class，id的命名规则就行。
再次说明，这只是为了节省代码而取巧的方法，内容和js没有完全分离。
ps：公司不能上QQ，不好意思呀！

方凳http://f-dev.com

TOP

skmtpsh

中级会员

帖子: 545
体力: 304
威望: 0
当前: 山东青岛

6^# 大中小发表于 2008-1-15 09:06

楼上的楼上太强了,这也能做出来

沉默寡言

TOP

yywzy [楼主]

中级会员

帖子: 90
体力: 306
威望: 0
离线: 36 天

7^# 大中小发表于 2008-1-17 16:38

真是谢谢了，高手，佩服佩服。

TOP

fangying

新手上路

帖子: 15
体力: 26
威望: 0
当前: 广东深圳
离线: 12 天

8^# 大中小发表于 2008-1-19 12:03

留個痕跡。

TOP

alou

小娄

高级会员

帖子: 345
体力: 722
威望: 0
当前: 上海徐汇
离线: 1 天

专长 前端制作,JS

9^# 大中小发表于 2008-1-19 15:09

我比较喜欢他写的JS

小娄

TOP

alone7

初级会员

帖子: 68
体力: 99
威望: 0
当前: 湖南长沙
离线: 10 天

专长 网页设计,前端制作,UE

10^# 大中小发表于 2008-4-2 11:59

:)

:p :p 好东西顶。。。。。。

www.bmx7.cn Blog

TOP

sun139

初级会员

帖子: 69
体力: 145
威望: 0
当前: 江苏无锡
离线: 8 天

专长 JAVA,Oracle,DBA

11^# 大中小发表于 2008-4-2 13:22

強就一个字，我只說一次。好的

平平淡淡生活

TOP

wenhao676

中级会员

帖子: 109
体力: 331
威望: 0
离线: 1 天

12^# 大中小发表于 2008-5-9 16:32

不错

收藏了，看过

学习

TOP

yadan

初级会员

帖子: 81
体力: 157
威望: 0
离线: 1 天

13^# 大中小发表于 2008-6-19 09:12

已经相当不错了.还需要改进?

我是人

TOP

surffen

新手上路

帖子: 5
体力: 15
威望: 0
当前: 湖南长沙
离线: 60 天

14^# 大中小发表于 2008-6-19 10:42

不错，收了。。

TOP

okletusgo

新手上路

帖子: 12
体力: 32
威望: 0
当前: 安徽淮南
离线: 17 天

15^# 大中小发表于 2008-6-19 11:46

这里面牛人真多

厉害啊!

TOP

7yeee

初级会员

帖子: 42
体力: 95
威望: 0
当前: 广东珠海

16^# 大中小发表于 2008-6-19 11:54

好东西。收藏.

另外，有没有版本是左右多列（现是2列），宽高更大一些的呢？

[ 本帖最后由 7yeee 于 2008-6-19 12:08 编辑 ]

TOP

mumue

初级会员

帖子: 173
体力: 179
威望: 0
离线: 1 天

17^# 大中小发表于 2008-6-19 15:11

不留名不行啊，高手真多

TOP

mumue

初级会员

帖子: 173
体力: 179
威望: 0
离线: 1 天

18^# 大中小发表于 2008-6-19 15:16

我以前也做过这种效果，一模一样的， JavaScript只用了一句：onMouseOver="table1.style.display='inline'; table2.style.display='none'"。

效果一样，改起来就算新手也会，代码还比4楼的少，运行起来也更快

TOP

mumue

初级会员

帖子: 173
体力: 179
威望: 0
离线: 1 天

19^# 大中小发表于 2008-6-19 15:17

缺点是不适合大网站用，因为代码不好管理

TOP

minmiss

初级会员

帖子: 89
体力: 180
威望: 0
当前: 四川眉山
离线: 1 天

专长 前端制作,PHP,ASP

20^# 大中小发表于 2008-7-4 14:27

英文站的呢？
www.alibaba.com

www.minchao.cn

TOP

ycanzl

新手上路

帖子: 12
体力: 31
威望: 0
当前: 湖南长沙
离线: 48 天

21^# 大中小发表于 2008-7-4 14:36

做得不错,收藏了.

TOP

Toogle

新手上路

帖子: 5
体力: 11
威望: 0
当前: 福建厦门
离线: 36 天

22^# 大中小发表于 2008-7-5 10:21

好东西，收藏了！

谢谢分享！

TOP