点评网dianping.com星星评论特效

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

今天我们来说下点评网的星星评论特效,有兴趣的朋友可以先看下:“http://www.dianping.com/”。我们点击一个食品吧,http://www.dianping.com/shop/4226858,我们可以看到有这样一个评论功能:

我们之前也做过一个类似的,当时是麦考林的一个星星评论,jQuery实现麦考林星星评论动画

我们可以看到html就是一个列表,主要看下样式:

我们可以看到在ul里有一个背景图,就是说没有鼠标划过时,就会有灰色的星星存在,当鼠标划过时,就会加上一个样式名,active-star,这个时候,有一个背景图,我们还会注意到,one-star是有宽度的,也是绝对定位的,这个时候,我想你明白如何实现了吧,就是鼠标移到哪个星星上,就通过宽度显示背景,因此,你看到的星星效果是不一样的。。。

我们通过hover以有html函数实现添加样式名以前评论结果的显示。。。

不过,我在实现click的功能时,发现hover的原因,click功能失效了,真是头晕啊,点击评网做得真强大。。。

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

预览地址:http://www.163css.net/net163/cssjs/2013/02/dian/index.html

下载地址:点评网dianping.com星星评论特效.zip

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