jQuery基于图层模仿五星星评价功能的方法

2024-05-06 16:19:41

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jQuery基于图层模仿五星星评价功能的方法,使用jQuery动态修改元素背景色的方法实现星评功能,需要的朋友可以参考下

本文实例讲述了jQuery基于图层模仿五星星评价功能的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script>

$(function(){

$(".star li").mouseenter(function(){

$(".star li").css("background","#f60");

$(this).css("background","#f60");

$(this).nextAll().css("background","#ccc");

})

});

</script>

<style type="text/css">

* {<br />

padding:0;margin:0;

list-style:none; float:left;

}

.star li {

float: left;

height: 20px;

width: 20px;

background-color: #CCC;

margin-right: 4px;

}

</style>

</head>

<body>

<div>选几星：</div>

<ul class="star">

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>