由 amtd 发布于: 2001-02-20 09:35

制作商务网站豪华采购车



　　为什么说是豪华呢，因为是用JavaScript实现一些特殊的功能，使这个车看上去非常华丽神奇！这个购物车可用光标任意拖动到屏幕的任意位置，同时保持相对屏幕静止的位置。也就是说，窗口滚动条如何滚动，购物车的位置始终保持不变。车里的项目可以动态开合，就像Windows的开始选单一样，我们看左面的两幅图！


　　（展开状态）　　　　（闭和状态）

　　这两幅图片给我们展示了当点击购物车的相应栏目后，下面的信息就会动态显示或关闭，这是其中一个功能。还有就是当光标移动到购物车后，光标就会变成十字形，这时就可以拖动它到屏幕的任意位置。这个效果我们可能在其他地方看到过，但是这和其他地方不同的是可以实现横向移动。以前我们可能见过一些相对静止的导航条，但是都是上下的，而这里展示的则是全方位的，上下左右都保持相对静止。

　　这里把源程序给大家奉上！为了方便起见，我们把程序保存为＊.js文件和＊.htm独立起来，这样方便修改！先来看HTML文件代码:

　　〈html〉〈HEAD〉

　　〈META content=″text/html; charset=gb2312″ http－equiv=Content－Type〉

　　〈STYLE〉＃floater

　　{LEFT: 430px; POSITION: absolute; TOP: 20px; VISIBILITY: visible; Z—INDEX: 100}

　　〈/STYLE〉

　　〈SCRIPT language=JavaScript src=″float.js″〉〈/SCRIPT〉

　　〈SCRIPT language=JavaScript src=″showhide.js″〉〈/SCRIPT〉

　　〈link rel=″stylesheet″ href=″style.css″〉

　　〈/HEAD〉

　　〈BODY bgColor=＃FFFFFF〉

　　〈DIV id=floater

　　　　 style=″LEFT: 316px; POSITION: absolute; TOP: 57px; Z－INDEX: 25; width: 102px; height: 238px″〉

　　〈TABLE border=0　　width=100 class=drag name=″KBStatic″

　　cellpadding=″0″ cellspacing=″0″ bgcolor=″＃FFA618″〉〈TR〉

　　〈TD valign=″top″ width=″22％″〉〈img src=″img/round.jpg″ width=″13″ height=″13″〉 〈/TD〉

　　〈TD width=″77％″〉 〈div align=″right″〉〈img src=″img/move.jpg″ width=″16″ height=″14″ style=″CURSOR: move″ border=″0″〉

　　〈img src=″img/close.jpg″ width=″16″ height=″14″〉〈/div〉〈/TD〉

　　〈TD width=″1％″〉＆nbsp;〈/TD〉

　　〈/TR〉〈TR〉

　　〈TD width=″22％″〉＆nbsp;〈/TD〉

　　〈TD width=″77％″〉

　　〈table align=left border=1 bordercolordark=＃ffffff bordercolorlight=＃999999 cellpadding=0 cellspacing=0

　　style=″CURSOR: default″ width=100〉

　　〈tr bgcolor=″＃FF9933″〉

　　〈td colspan=2〉

　　〈div id=ShowHideCart align=center style=″cursor:hand″ language=javascript onClick=″return ShowHideCart—onclick()″ onMouseOver=″return ShowHideCart—onmouseover()″ onMouseOut=″return ShowHideCart—onmouseout()″〉

　　〈b〉〈font face=″Webdings″〉5〈/font〉购物箱〈font face=″Webdings″〉5〈/font〉

　　〈/b〉 〈/div〉〈/td〉〈/tr〉〈tr〉

　　〈td colspan=2〉 〈div id=cart〉

　　〈table id=mytable border=1 bordercolordark=＃ffffff bordercolorlight=＃999999 cellpadding=0 cellspacing=0

　　style=″CURSOR: default″ width=100 〉

　　〈tr〉〈td bgcolor=＃f2f1f3 width=″60″〉 名称 〈/td〉

　　〈td bgcolor=＃f2f1f3 width=″46″〉单价

　　〈/td〉〈/tr〉〈tr〉

　　〈td bgcolor=＃f2f1f3 width=″60″〉＆nbsp;〈/td〉〈td bgcolor=＃f2f1f3 width=″46″〉＆nbsp;〈/td〉〈/tr〉〈tr〉

　　〈td width=″60″〉〈/td〉

　　〈td width=″46″〉〈/td〉〈/tr〉〈tr〉

　　〈td bgcolor=＃f2f1f3 width=60〉总价：

　　〈/td〉

　　〈td bgcolor=＃f2f1f3 id=total width=″46″〉＆nbsp;〈/td〉〈/tr〉〈/table〉〈/div〉

　　〈tr bgcolor=″＃FF9933″〉 〈td colspan=2〉

　　〈div id=ShortCutBar style=″cursor:hand″ language=javascript onMouseOut=″return ShortCutBar—onmouseout()″ align=center onMouseOver=″return ShortCutBar—onmouseover()″ onClick=″return ShortCutBar—onclick()″〉〈b〉〈font face=″Webdings″〉5〈/font〉快捷栏〈font face=″Webdings″〉5〈/font〉〈/b〉〈/div〉〈/td〉〈/tr〉〈tr〉

　　〈td colspan=2〉 〈div id=ShortCut〉

　　〈table border=1 bordercolordark=＃ffffff

　　bordercolorlight=＃999999 cellpadding=0 cellspacing=0

　　style=″CURSOR: default″ width=100〉

　　〈tr bgcolor=″＃FFFFFF″〉

　　〈td colspan=2〉〈img align=absMiddle

　　border=0 height=23

　　src=″img/basket.gif″

　　width=25〉购物箱 〈/td〉〈/tr〉

　　〈tr bgcolor=″＃FFFFFF″〉

　　〈td〉〈img align=absMiddle

　　border=0 height=23

　　src=″img/money.gif″

　　width=25〉下订单 〈/td〉 〈/tr〉

　　〈tr bgcolor=″＃FFFFFF″〉

　　〈td〉 〈img align=absMiddle border=0 height=23

　　src=″img/search—2.gif″

　　width=25〉查订单〈/td〉〈/tr〉

　　〈tr bgcolor=″＃FFFFFF″〉

　　〈td〉〈img align=absMiddle

　　border=0 height=23

　　src=″img/question.gif″

　　 width=25〉帮助〈/td〉〈/tr〉

　　〈/table〉〈/div〉〈/td〉〈/tr〉〈/table〉

　　〈/TD〉

　　〈TD width=″1％″〉＆nbsp;〈/TD〉

　　〈/TR〉〈TR〉

　　〈TD valign=″bottom″ width=″22％″〉〈img src=″img/round1.jpg″ width=″13″ height=″12″〉〈/TD〉

　　〈TD width=″77％″〉＆nbsp;〈/TD〉

　　〈TD width=″1％″〉＆nbsp;〈/TD〉

　　〈/TR〉〈/TABLE〉〈/DIV〉 〈/body〉

　　〈/html〉

　　至此，所有HTML中的代码就结束了，其中所有注释内容都包括在％之间，在使用中自行去掉！其他修饰性的图片和文字也可自行更改，不过注意关键的ID部分指向一定不要错，不然无法正常运行！

　　另外的两个外部JS代码，可以在使用时打开一个文本编辑器（如记事本程序），将所有代码写进去然后保存为＊.js的文件。至于文件名也可自行更改，不过更改以后在HTML代码中的指针部分也需要做相应的改动。方便起见，我把这两个JavaScript 文件放在网上，需要的朋友可以直接去下载（float.js 可以在http://www.nease.net/～onlylove/new/test/shop/float.js 得到；showhide.js 可以在 http://www.nease.net/～onlylove/new/test/shop/showhide.js得到）。

　　这个购物车所用到的脚本比较多，而且在一些功能实现上也存在DIV互相包括的情况，所以在使用中要格外注意，一处错误就可能导致无法运行！




（作者：王超　
__________________