首页 > 经验记录 > JQuery实现打星星(五星好评)功能

JQuery实现打星星(五星好评)功能

实现效果:鼠标移上去某个星星,他和他前面所有的星星变红,离开全变黑。如果在上边点了某个星星在离开,就会保持
 
emmmmmm还挺有意思

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="commons/basePath.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/createXHR.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style>
	#hoshi li{
		font-size:50px;
		float: left;
		cursor: pointer;
		list-style-type:none;
	}
</style>
<script type="text/javascript">
	$(function(){
		var flag = true;
		$("#hoshi li").mouseover(function(){
			$(this).nextAll().css("color","black").end().prevAll().addBack().css("color","red");
		}).mouseout(function(){
			if(flag){
				$(this).siblings().addBack().css("color","black");
			}else{
				flag =true;
			}
		}).click(function(){
			flag = false;
		})
	});
</script>
<title>首页</title>
</head>
<body>
	<div>
		<ul id="hoshi">
			<li>★</li>
			<li>★</li>
			<li>★</li>
			<li>★</li>
			<li>★</li>
		</ul>
	</div>
	<div style="clear:both;"></div>
</body>
</html>

 

           


EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00