📄 515.html
字号:
<STYLE type=text/css>
<!--
body,td { font-size:9pt;}
hr { color: #000000; height: 1px}
-->
</STYLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD><TITLE>论坛精华 >> javascript小栈 >> 制作商务网站豪华采购车</title>
</head>
<body >
<p><IMG SRC="../image/jsp001_middle_logo.gif" WIDTH="180" HEIGHT="60" BORDER=0 ALT=""></p>
<table width=100% bgcolor="#cccccc" align=center cellpadding="2" cellspacing="0" border=1 bordercolorlight="#000000" bordercolordark="#FFFFFF">
<tr bgcolor="#EFF8FF"><td>
<a href=http://www.jsp001.com/list_thread.php?int_attribute=4>论坛精华</a>
>> <a href=http://www.jsp001.com/list_thread.php?forumid=46&int_attribute=4>javascript小栈</a>
>> 制作商务网站豪华采购车 [<a href=http://www.jsp001.com/forum/showthread.php?goto=newpost&threadid=515>查看别人的评论</a>]<br>
<hr><p>由 amtd 发布于: 2001-02-20 09:35</p><p><img src="images/icons/icon1.gif" alt="Post" border=0> </p><p>制作商务网站豪华采购车<br><br><br><br> 为什么说是豪华呢，因为是用JavaScript实现一些特殊的功能，使这个车看上去非常华丽神奇！这个购物车可用光标任意拖动到屏幕的任意位置，同时保持相对屏幕静止的位置。也就是说，窗口滚动条如何滚动，购物车的位置始终保持不变。车里的项目可以动态开合，就像Windows的开始选单一样，我们看左面的两幅图！ <br><img src="http://www.ccidnet.com/tech/web/2000/01/19/image/b0801t01.jpg" border=0><br><br> （展开状态） （闭和状态） <br><br> 这两幅图片给我们展示了当点击购物车的相应栏目后，下面的信息就会动态显示或关闭，这是其中一个功能。还有就是当光标移动到购物车后，光标就会变成十字形，这时就可以拖动它到屏幕的任意位置。这个效果我们可能在其他地方看到过，但是这和其他地方不同的是可以实现横向移动。以前我们可能见过一些相对静止的导航条，但是都是上下的，而这里展示的则是全方位的，上下左右都保持相对静止。 <br><br> 这里把源程序给大家奉上！为了方便起见，我们把程序保存为＊.js文件和＊.htm独立起来，这样方便修改！先来看HTML文件代码: <br><br> 〈html〉〈HEAD〉 <br><br> 〈META content=″text/html; charset=gb2312″ http－equiv=Content－Type〉 <br><br> 〈STYLE〉＃floater <br><br> {LEFT: 430px; POSITION: absolute; TOP: 20px; VISIBILITY: visible; Z—INDEX: 100} <br><br> 〈/STYLE〉 <br><br> 〈SCRIPT language=JavaScript src=″float.js″〉〈/SCRIPT〉 <br><br> 〈SCRIPT language=JavaScript src=″showhide.js″〉〈/SCRIPT〉 <br><br> 〈link rel=″stylesheet″ href=″style.css″〉 <br><br> 〈/HEAD〉 <br><br> 〈BODY bgColor=＃FFFFFF〉 <br><br> 〈DIV id=floater <br><br> style=″LEFT: 316px; POSITION: absolute; TOP: 57px; Z－INDEX: 25; width: 102px; height: 238px″〉 <br><br> 〈TABLE border=0 width=100 class=drag name=″KBStatic″ <br><br> cellpadding=″0″ cellspacing=″0″ bgcolor=″＃FFA618″〉〈TR〉 <br><br> 〈TD valign=″top″ width=″22％″〉〈img src=″img/round.jpg″ width=″13″ height=″13″〉 〈/TD〉 <br><br> 〈TD width=″77％″〉 〈div align=″right″〉〈img src=″img/move.jpg″ width=″16″ height=″14″ style=″CURSOR: move″ border=″0″〉 <br><br> 〈img src=″img/close.jpg″ width=″16″ height=″14″〉〈/div〉〈/TD〉 <br><br> 〈TD width=″1％″〉＆nbsp;〈/TD〉 <br><br> 〈/TR〉〈TR〉 <br><br> 〈TD width=″22％″〉＆nbsp;〈/TD〉 <br><br> 〈TD width=″77％″〉 <br><br> 〈table align=left border=1 bordercolordark=＃ffffff bordercolorlight=＃999999 cellpadding=0 cellspacing=0 <br><br> style=″CURSOR: default″ width=100〉 <br><br> 〈tr bgcolor=″＃FF9933″〉 <br><br> 〈td colspan=2〉 <br><br> 〈div id=ShowHideCart align=center style=″cursor:hand″ language=javascript onClick=″return ShowHideCart—onclick()″ onMouseOver=″return ShowHideCart—onmouseover()″ onMouseOut=″return ShowHideCart—onmouseout()″〉 <br><br> 〈b〉〈font face=″Webdings″〉5〈/font〉购物箱〈font face=″Webdings″〉5〈/font〉 <br><br> 〈/b〉 〈/div〉〈/td〉〈/tr〉〈tr〉 <br><br> 〈td colspan=2〉 〈div id=cart〉 <br><br> 〈table id=mytable border=1 bordercolordark=＃ffffff bordercolorlight=＃999999 cellpadding=0 cellspacing=0 <br><br> style=″CURSOR: default″ width=100 〉 <br><br> 〈tr〉〈td bgcolor=＃f2f1f3 width=″60″〉 名称 〈/td〉 <br><br> 〈td bgcolor=＃f2f1f3 width=″46″〉单价 <br><br> 〈/td〉〈/tr〉〈tr〉 <br><br> 〈td bgcolor=＃f2f1f3 width=″60″〉＆nbsp;〈/td〉〈td bgcolor=＃f2f1f3 width=″46″〉＆nbsp;〈/td〉〈/tr〉〈tr〉 <br><br> 〈td width=″60″〉〈/td〉 <br><br> 〈td width=″46″〉〈/td〉〈/tr〉〈tr〉 <br><br> 〈td bgcolor=＃f2f1f3 width=60〉总价： <br><br> 〈/td〉 <br><br> 〈td bgcolor=＃f2f1f3 id=total width=″46″〉＆nbsp;〈/td〉〈/tr〉〈/table〉〈/div〉 <br><br> 〈tr bgcolor=″＃FF9933″〉 〈td colspan=2〉 <br><br> 〈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〉 <br><br> 〈td colspan=2〉 〈div id=ShortCut〉 <br><br> 〈table border=1 bordercolordark=＃ffffff <br><br> bordercolorlight=＃999999 cellpadding=0 cellspacing=0 <br><br> style=″CURSOR: default″ width=100〉 <br><br> 〈tr bgcolor=″＃FFFFFF″〉 <br><br> 〈td colspan=2〉〈img align=absMiddle <br><br> border=0 height=23 <br><br> src=″img/basket.gif″ <br><br> width=25〉购物箱 〈/td〉〈/tr〉 <br><br> 〈tr bgcolor=″＃FFFFFF″〉 <br><br> 〈td〉〈img align=absMiddle <br><br> border=0 height=23 <br><br> src=″img/money.gif″ <br><br> width=25〉下订单 〈/td〉 〈/tr〉 <br><br> 〈tr bgcolor=″＃FFFFFF″〉 <br><br> 〈td〉 〈img align=absMiddle border=0 height=23 <br><br> src=″img/search—2.gif″ <br><br> width=25〉查订单〈/td〉〈/tr〉 <br><br> 〈tr bgcolor=″＃FFFFFF″〉 <br><br> 〈td〉〈img align=absMiddle <br><br> border=0 height=23 <br><br> src=″img/question.gif″ <br><br> width=25〉帮助〈/td〉〈/tr〉 <br><br> 〈/table〉〈/div〉〈/td〉〈/tr〉〈/table〉 <br><br> 〈/TD〉 <br><br> 〈TD width=″1％″〉＆nbsp;〈/TD〉 <br><br> 〈/TR〉〈TR〉 <br><br> 〈TD valign=″bottom″ width=″22％″〉〈img src=″img/round1.jpg″ width=″13″ height=″12″〉〈/TD〉 <br><br> 〈TD width=″77％″〉＆nbsp;〈/TD〉 <br><br> 〈TD width=″1％″〉＆nbsp;〈/TD〉 <br><br> 〈/TR〉〈/TABLE〉〈/DIV〉 〈/body〉 <br><br> 〈/html〉 <br><br> 至此，所有HTML中的代码就结束了，其中所有注释内容都包括在％之间，在使用中自行去掉！其他修饰性的图片和文字也可自行更改，不过注意关键的ID部分指向一定不要错，不然无法正常运行！ <br><br> 另外的两个外部JS代码，可以在使用时打开一个文本编辑器（如记事本程序），将所有代码写进去然后保存为＊.js的文件。至于文件名也可自行更改，不过更改以后在HTML代码中的指针部分也需要做相应的改动。方便起见，我把这两个JavaScript 文件放在网上，需要的朋友可以直接去下载（float.js 可以在http://www.nease.net/～onlylove/new/test/shop/float.js 得到；showhide.js 可以在 <a href="http://www.nease.net/～onlylove/new/test/shop/showhide.js得到）。" target=_blank>http://www.nease.net/～onlylove/new/test/shop/showhide.js得到）。</a> <br><br> 这个购物车所用到的脚本比较多，而且在一些功能实现上也存在DIV互相包括的情况，所以在使用中要格外注意，一处错误就可能导致无法运行！ <br><br><br><br><br>（作者：王超 <br>__________________<br><font color=red>真实源于生活！ </font><br>请访问我们的网站： <br>（VB爱好者乐园） <br><a href="http://www.vbgood.com" target=_blank>http://www.vbgood.com</a><br><a href="http://www.d1vb.com" target=_blank>http://www.d1vb.com</a><br><a href="http://61.128.97.225/vbgood/index.asp" target=_blank>http://61.128.97.225/vbgood/index.asp</a><br>拥有1800多个资料！ </p></td>
</tr>
</table>
<p>
<CENTER><a href="http://www.jsp001.com/forum/newreply.php?action=newreply&threadid=515">点这里对该文章发表评论</a></CENTER>
<p>该文章总得分是 <font color=red>0</font> 分，你认为它对你有帮助吗？
[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=515&intVote=4","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>非常多</a>](<font color=red>0</font>)
[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=515&intVote=2","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>有一些</a>](<font color=red>0</font>)
[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=515&intVote=1","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>无帮助</a>](<font color=red>0</font>)
[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=515&intVote=-1","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>是灌水</a>](<font color=red>0</font>) </p>
<script language="javascript" src="http://www.jsp001.com/include/read_thread_script.php?threadid=515"></script>
<p><CENTER>
Copyright © 2001 - 2009 JSP001.com . All Rights Reserved <P>
<IMG SRC="../image/jsp001_small_logo.gif" WIDTH="85" HEIGHT="30" BORDER=0 ALT="">
</CENTER></p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -