这个产品显示效果作的太好了。高手请教下怎么学习它？

Question

我研究了半天还是没法复制出它这样的效果
有人能能指点下吗?

Answer 1

忘了贴链接了：
http://www1.macys.com/catalog/product/index.ognc?ID=255131&PseudoCat=se-xx-xx-xx.esn_results

Answer 2

http://www1.macys.com/catalog/product/index.ognc?ID=255131&PseudoCat=se-xx-xx-xx.esn_results
我把页面代码拷贝下存成htm在浏览器中打开
就是flash那块始终显示不出图片 是怎么回事？

Answer 3

我是查看这个页面的源代码，然后把文本文件保存成htm的
所以里面的图片，css,JS都是引用它的http链接.
因为它flash调用代码里用的是相对地址
所以我把swf文件保存在了本地上
然后改代码直接指向本地的swf.
<div id="productFlash" name="productFlash" style="display:block">
<!-- <img src="http://slimages.macys.com/is/image/MCY/products/3/optimized/326323_fpx.tif?wid=330" title="" alt=""/> -->

<script language="javascript">

MACYS.pdp.currentFlashContainer = "pdpZoom";
MACYS.pdp.prodImgDesc = "Lacoste &quot;New Classic&quot; Horizontal Shopping Bag";
MACYS.pdp.currentProductImg = "http://slimages.macys.com/is/image/MCY/products/3/optimized/326323_fpx.tif?op_sharpen=1";
MACYS.pdp.flashHeight = 422;
MACYS.pdp.flashHeightLarge = 553;
MACYS.pdp.flashWidth = 327;
MACYS.pdp.flashWidthLarge = 429;
MACYS.pdp.defaultProdImg = MACYS.pdp.currentProductImg + "&wid=" + MACYS.pdp.flashWidth;
MACYS.pdp.defaultProdImgLarge = MACYS.pdp.currentProductImg + "&wid=" + MACYS.pdp.flashWidthLarge;
MACYS.pdp.currentProductImg = MACYS.pdp.currentProductImg + "&wid=800&hei=980";
MACYS.pdp.lastImageState["pdpZoom"] = undefined;
MACYS.pdp.lastImageState["pdpZoomLarge"] = undefined;


if(DetectFlashVer()) {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', MACYS.pdp.flashWidth,
'height', MACYS.pdp.flashHeight,
'src', 'pdpZoom',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'pdpZoom',
'bgcolor', '#f1f1f1',
'name', 'pdpZoom',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','always',
'salign', ''
); //end AC code
    YAHOO.util.Event.addListener(MACYS.pdp.docFocus, window, "focus");
}
else {
document.write('<img src="' + MACYS.pdp.defaultProdImg + '" alt="' + MACYS.pdp.prodImgDesc + '" title="' + MACYS.pdp.prodImgDesc + '"/>');
}

</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="300" height="391" id="pdpZoom" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="pdpZoom.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#999999" />
<embed src="pdpZoom.swf" quality="high" bgcolor="#f1f1f1" width="327" height="422" name="pdpZoom" align="middle" wmode="transparent" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="imgSrc=http://slimages.macys.com/is/image/MCY/products/3/optimized/326323_fpx.tif?wid=800&op_sharpen=1&hei=980" />
</object>
<style>
.imageControls {display:none;}
.swatchDescription {display:none;}
</style>
</noscript>

<img src="http://slimages.macys.com/is/image/MCY/products/3/optimized/326323_fpx.tif?bgc=255,255,255&wid=327&qlt=90,0&layer=comp&op_sharpen=0&resMode=bicub&op_usm=0.7,1.0,0.5,0&fmt=jpeg" style="display:none" width="327" name="PDPimage" border="0" alt="Lacoste "New Classic" Horizontal Shopping Bag">
</div>
<div class="imageControls">
<img onClick="MACYS.pdp.viewLargerImage();" src="http://assets.macys.com/img/pdp/larger_image.gif" alt="larger image" title="larger image"/>
</div>
            

Answer 4

前面还有很多JS文件<script src="http://assets.macys.com/javascript/AC_RunActiveContent.js" language="Javascript"></script>
<script src="http://assets.macys.com/web20/assets/script/yahoo/yahoo-dom-event/yahoo-dom-event.js" language="Javascript"></script>
<script src="http://assets.macys.com/web20/assets/script/macys/base/macys-min.js" language="Javascript"></script>
<script src="http://assets.macys.com/web20/assets/script/macys/base/config-min.js" language="Javascript"></script>
<script src="http://assets.macys.com/web20/assets/script/macys/util/domUtility-min.js" language="Javascript"></script>
<script src="http://assets.macys.com/web20/assets/script/macys/catalog/product/pdp-min.js" language="Javascript"></script>还有这些这个：<input type="hidden" id="macysCookieDomain" value=".macys.com"/>
                    
                    <input type="hidden" id="MACYS_secureHostName" value="https://www.macys.com"/>
                    <input type="hidden" id="MACYS_baseHostName" value="http://www1.macys.com"/>
                    <input type="hidden" id="MACYS_assetsHostName" value="http://assets.macys.com"/>
                    <input type="hidden" id="MACYS_imageHostName" value="http://slimages.macys.com/is/image/MCY"/>
JS 看不大明白

Answer 5

js里用到了 Yahoo! User Interface Library (YUI)组件
YUI 太强大了 而且免费