当当网查看产品大图动画设计制作

作者:林炜贤来源:www.163css.com发表时间:(2011-01-09)

当当网的成功是让人羡慕的,最近传出当当和京东之间在搞价格战,估计以后电子商务之间的竞争会越来越激烈,毕竟宽带网络正逐步进入每个家庭,广州的电信宽带最少是4m,网速会越来越快。

点击当当网的百货电脑办公栏目,我们可以看到许多办公电器,笔记本,显示器,鼠标,U盘。。。我点击了一台LG显示器,进步LG显示器页面,许多大图加上文字链接,清晰。我选择了一个我喜欢的产品,接着看到了各大商城都采用的界面:

让我觉得有点新鲜的是,当我的鼠标划过大图时,并没有京东那样的右侧弹出大图显示细节,点击后我进入了一个详细大图介绍页面,而这个页面就是我要向大家介绍的动画了。

 左侧是大图,右侧是竖向小图,左侧有左右控制按钮,这个很像我当时制作的联想产品动画,然后右侧是没有滚动功能的,估计当当认为没有那么多产品图,而现实中的确没有那么多图片,毕竟这只是介绍这个产品的,当然,右侧是可以加许多小图的,左侧也可以相应显示。

这里必须提一下:我们的这个动画,大图显示采用了绝对地址,并还得用上转义字符:var imgJson,感觉这个东西很像一个小型数据库。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/201101/ddpro/index.html

下载地址:当当网查看产品大图动画设计制作.rar

返回作者主页:www.163css.com阅读 (9023)
更多 1