腾讯家电产品对比页面特效

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

网站建设现在越来越人性化,比如产品栏目,以前用户只是看到产品图片及介绍,现在加上了产品放大镜功能,可以将产品看得更清楚,有的还增加了大小选择。不过,用户买产品还喜欢对比,这个特点在我们的网站上也出现了。

以腾讯家电为例,当你点击一种品牌家电,你可以看到这种品牌下面的各个产品,与平常不同的是,下面都增加了一个按钮,写着“对比”,看到这两个字,用户都会不自觉地进行点击,接着,在页面的右侧,出现了一个类似QQ客服一个的选框,你可以将你喜欢的产品放在这个框里,不过腾讯设置了用户只能对比四种产品。当你点击“开始对比”,将会跳转到另外的页面,这个页面显示了你所选择的产品的各种参数,你可以一目了然。

腾讯的代码是牛的,但我们在做前台时,要实现这样的功能是做不到的,因为它必须根据数据库来添加产品。但我们可以用到腾讯点击“对比”弹出选择框这个动画,在我们的页面制作中可以应用。

腾讯的这种做法值得夸奖,弹出窗不但可以关闭,还可以跟随着滚动条进行滚动,真是人性化。

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

可惜的是,前两天我只能实现添加一个产品,今天花了4小时,将它改成只以自由添加模式的,呵。。。

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

预览地址:http://www.163css.net/net163/cssjs/201107/qqpro/index.html

下载地址:腾讯家电产品对比页面特效.zip

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