jQuery之星星评分

最新推荐文章于 2024-04-20 00:42:24 发布

轨道骑士

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量533

点赞数

文章标签： js jquery css html css3

本文链接：https://blog.csdn.net/qq_43696174/article/details/105738884

版权

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星星评分</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<script src="../jquery.js"></script>
<script>
$(function(){
    var flag=0;
   $('#div1 li').mouseover(function(){
    if (flag!=1)
	{
     $(this).css(
	 "background-position","0 -28px").prevAll().css(
	 "background-position","0 -28px");
	 $('#div1 span').text($(this).attr('title'));}
	 }).mouseout(function(){
	 if (flag!=1) 
	 {
	 $('#div1 li').css("background-position","0 0")
	   $('#div1 span').text(" ");}
	 }).click(function(){
	    if(flag!=1) flag=1;
		else{
		  $('#div1 li').css("background-position","0 0")
		 $(this).css(
	 "background-position","0 -28px").prevAll().css(
	 "background-position","0 -28px");
	 $('#div1 span').text($(this).attr('title'));
	
	 }
	 });

});
</script>
</head>

<body>
<div id="div1">
<ul>
	<li title="一星差评，呵呵呵，差的忍无可忍！！！"></li>
	<li title="二星差评"></li>
	<li title="三星差评"></li>
	<li title="四星中评"></li>
	<li title="五星中评"></li>
	<li title="六星中评"></li>
	<li title="七星好评"></li>
	<li title="八星好评"></li>
	<li title="九星好评"></li>
	<li title="十星满评！！！666,酷毙了！！！"></li>
	<span></span>
</ul>
</div>
</body>
</html>

css代码：

@charset "utf-8";
/* CSS Document */
* {
	padding: 0;
	margin: 0;
}
ul{
	position: absolute;
	top: 50px;
	left: 50px;
}			
li {
	width: 24px;
	height: 19px;
	background-image:url(img/start.png);
	background-repeat:no-repeat;
	background-position:0 0;
	float: left;
	list-style: none;
}

效果：

轨道骑士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之星星评分

HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>星星评分</title><link rel="stylesheet" type="text/css" href="css1.css"/><script src=".....
复制链接

扫一扫