Question

嘿，伙计们一直在查看Steam网站，发现它没有使用Flash。

正在使用哪些技术来创建页面？例如滚动条滚动浏览不同的游戏，究竟是怎么回事？

提前感谢您的回复。

Answer 1

Javascript，还有很多。从页面开头：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Welcome to Steam</title> 
    <link href="http://cdn.store.steampowered.com/public/css/styles_storev5.css?v=221260115" rel="stylesheet" type="text/css" /> 
<!--[if lte IE 6]> <link href="http://cdn.store.steampowered.com/public/css/styles_storev5_ie6.css?v=3855293424" rel="stylesheet" type="text/css" />
 <![endif]--> 
<!--[if lte IE 7]> <style type="text/css"> .iepoupfix{ display: block; } </style> <![endif]--> 
    <script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/swfobject.js?v=3216748271&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/prototype-1.6.0.2.js?v=1627908004&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js?v=1333279996&l=english&load=effects,controls,slider"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/javascript.js?v=853265233&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/main.js?v=199395227&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/jserrorreport.js?v=19341832&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/header.js?v=318945778&l=english"></script> 
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/search.js?v=630051104&l=english"></script> 
    <script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/cluster.js?v=4033443305&l=english"></script> 
    <link rel="search" type="application/opensearchdescription+xml" title="Steam Search" href="http://store.steampowered.com/public/open_search.xml"> 
</head>

着名的图书馆：Scriptaculous。原型。 swfobject.js！奇怪的是，最后一个实际上应该对嵌入闪存有用，虽然我不确定它是否在该页面上使用（可能只是在网站的其他地方用于电影或音频）。

Answer 2

可滚动的“游戏”部分很可能是＆lt; div＆gt;带溢出滚动条。箭头可能是javascript调用的链接。由于它是固定宽度，它只使用javascript通过“宽x”滚动框。

在大多数情况下，该页面只是JavaScript，HTML和CSS。它不一定是AJAX，虽然它可以“按需”从服务器请求这些图像来减少服务器负载，而不是预取它们。

Answer 3

我真棒的Chrome Sniffer Chrome扩展程序告诉我该网站使用的是script.aculo.us，这是一个类似于MooTools和jQuery的Javascript库。如今，动态javascript被用于许多简洁的效果。

Answer 4

大多数非闪存解决方案可能使用XHTML和Javascript的组合（通常是JS库，例如jQuery或Prototype，或微软的闪存竞争对手 - Silverlight。< / p>

Steam网站似乎正在使用非常受欢迎的jQuery和jQuery Tools（Scrollable插件）。使用jQuery Tools的可滚动插件非常快速且易于设置，对于显示内容和图像非常有用。我已经在几个客户的网站上使用它，结果很好。

更新：看看来源似乎Steam实际上正在使用同样流行的Prototype库，但它与jQuery和scrollabel插件的概念非常相似。

Answer 5

除了Tchalvak的回复（我还不能评论）之外，用于嵌入Flash对象的swfobject用于当您选择查看游戏的详细描述时在角落中显示的预告片。

在下载高质量（通常是HD）版本作为Steam客户端中的“媒体”项目之前，它还用于预览预告片。

Answer 6

他们正在使用JavaScript来解决所有这些问题。如果查看页面源代码，可以看到页面包含了prototype.js和scriptaculous库。

Answer 7

嘿，它使用script.aculo.us，代表它是基于Prototype。我没有看到有人注意到这一点。

prototype，jQuery，MooTools等只是框架。如果您编写自己的javascript函数，也可以这样做。它们只是为AJAX，动画效果，高级DOM遍历，幻灯片等提供现成的功能。我使用它们的原因是动画平滑性 - 当我无法包含jQuery时，我编写了自己的函数。

Answer 8

与您标记，ajax或其他形式的javascript一样。

Answer 9

您可以看一下：http://w3techs.com/sites/info/steampowered.com

网站不使用闪存，那么它使用的是什么？

9 个答案: