模拟实现的星星评分效果详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了类似于星级评分的效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  list-style:none;
 }
.star li{
  float:left;
  height:20px;
  width:20px;
  background-color:blue;
  margin-right:4px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){ 
  $(".star li").mouseenter(function(){
    $(".star li").css("background","#f60");
    $(this).css("background","#f60");
    $(this).nextAll().css("background","#ccc");
  })
});
</script>
</head>
<body>
<div>选中星星:</div>
<ul class="star">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function(){ }),当文档内容完全加载完毕再去执行函数中的代码。

(2).$(".star li").mouseenter(function(){}),为li元素注册mouseenter事件处理函数。

(3).$(".star li").css("background","#f60"),设置所有li元素的背景颜色。

(4).$(this).css("background","#f60"),将当前li元素的背景颜色设置为#f60。

(5).$(this).nextAll().css("background","#ccc"),将当前元素后面的所有的li元素背景色设置为#ccc。

二.相关阅读:

(1).mouseenter事件可以参阅jQuery mouseenter事件一章节。

(2).css()方法可以参阅jQuery css()一章节。

(3).nextAll()方法可以参阅jQuery nextAll()一章节。

模拟实现的星星评分效果详解

回复

我来回复
  • 暂无回复内容