治疗技术焦虑的方法就是学习!

jQuery实现星星评分样式

前端 李新广 822℃ 0评论

效果图如下:



原理:当鼠标经过或点击时改变对应位置的图片想要实现这个插件首先需要了解jQuery的三个事件:mouseover(鼠标经过)、mouseout(鼠标离开)、click(鼠标点击)。
了解了这三个事件剩下的就是对他们进行监听,然后进行相应的逻辑处理就行了。
先贴出css样式和页面的主要代码:


以上代码里面引用了图片资源,所以不能直接复制运行。

插件下载地址:http://download.csdn.net/detail/u283056051/9086229

首先分析一下需求:
一、鼠标第一次经过星星此时是未评价状态,隐藏域的值为0,星星需要跟随鼠标的移动而改变,但是如果鼠标未点击星星,当鼠标离开时星星应恢复未评价的状态,且对应隐藏域的值仍未0.
二、鼠标不是第一次经过星星,此时隐藏域的值不为0,且星星已经有几颗亮了,星星仍需要跟随鼠标的移动而改变,但是如果鼠标未点击星星,当鼠标离开时星星应恢复上次点击过的状态,即星星亮的个数与对应隐藏域的值相等。
三、鼠标经过星星,不论是否为第一次经过,当鼠标点击星星时,获取星星的索引值后加1,然后把值赋给对应的隐藏域。

js代码分析:


鼠标经过事件


鼠标离开事件


鼠标点击事件

下面是完整的js代码

至此就实现了评分的功能,所有的分值都保存在对应的隐藏域中,可以根据自己的需要获取。

转载请注明:大道至简 » jQuery实现星星评分样式

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址