lovo.cn家纺标题切换图片特效

作者:林炜贤来源:www.163css.com发表时间:(2013-04-18)

今天我们要介绍的这个特效来着于lovo.cn,这是一个家纺的网站,换句话说,就是一个卖家纺的商城,这个精美的商城,推荐大家使用IE8以上的浏览器吧,在IE6下那些PNG还真是难看。。。

我们要介绍的这个特效,跟之前另外一个商城非常像:“银泰网yintai文字图片切换特效”,也不知是谁抄谁的,但精美的效果,大家都喜欢,代码也是不同的。。。

我们可以看到银泰网将这个幻灯片放在首页顶部,如何lovo家纺也把它放到顶部,那就是抄袭银泰网了,我们看下HTML代码,会发现lovo将遮罩层写在html里,样式名为mask,这点感觉比不上银泰。。

我们看下代码,这样的写法都是采用定位的技术,真不知我们伟大的程序员是如何实现的。。。

这是我们实现滑动的代码,大家会有什么感觉呢?无非就是一个HOVER一个setInterval,不过,用简单的代码实现复杂的效果,这样的技术是不是更牛逼,相对于银泰的复杂代码,这个舒服多了。。。

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

关于划过的效果,我们在FF及GG下,可以看到很舒服的效果,而这是CSS3的效果:transition。。。

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

预览地址:http://www.163css.net/net163/cssjs/2012/10/lovohdp/index.html

下载地址:lovo_cn家纺标题切换图片特效.zip

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