jQuery实现星星点赞功能

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

livana.

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

阅读量223

点赞数

分类专栏：前端学习文章标签： html5 javascript css jquery

本文链接：https://blog.csdn.net/weixin_43898383/article/details/118926546

版权

学习同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

test.html

<!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="startpic/jquery.js"></script>
<link href="startpic/startcss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
$.fn.studyplay_star=function(options,callback){
	//默认设置
	var settings ={
		MaxStar      :20,
		StarWidth    :23,
		CurrentStar  :5,
		Enabled      :true
		};	
	if(options) { jQuery.extend(settings, options); };
	var container = jQuery(this);
	container.css({"position":"relative"})
	.html('<ul class="studyplay_starBg"></ul>')	
	.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth)
	.html('<li class="studyplay_starovering" style="width:'+settings.CurrentStar*settings.StarWidth+'px; z-index:0;" id="studyplay_current"></li>');
	if(settings.Enabled)
	{
	var ListArray = "";	
	for(k=1;k<settings.MaxStar+1;k++)
	{
		ListArray +='<li class="studyplay_starON" style="width:'+settings.StarWidth*k+'px;z-index:'+(settings.MaxStar-k+1)+';"></li>';
	}
	container.find('.studyplay_starBg').append(ListArray)
	container.find('.studyplay_starON').hover(function(){											  
											  $(this).removeClass('studyplay_starON').addClass("studyplay_starovering");
											  $("#studyplay_current").hide();
											  },
									  function(){
										  $(this).removeClass('studyplay_starovering').addClass("studyplay_starON");
										  $("#studyplay_current").show();
										  })
	.click(function(){
					var studyplay_count = settings.MaxStar - $(this).css("z-index")+1;
					$("#studyplay_current").width(studyplay_count*settings.StarWidth)
					//回调函数
					if (typeof callback == 'function') {
					callback(studyplay_count);
					return ;
					}
					})
 }	
}	
</script>
<script type="text/javascript">
		$(document).ready(function(){
			$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true},function(value){alert(value)});
		});	
</script>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="z"></div>
</body>
</html>

startcss.css

@charset "utf-8";
/* CSS Document */

.studyplay_starBg{
	 background:url(start.gif) 0 -22px;position:absolute; top:0; left:0; height:22px; padding:0px; cursor:pointer;
	}
.studyplay_starovering{
	background:url(start.gif); height:22px; position:absolute; top:0; left:0;
}
.studyplay_starON{
	 position:absolute; top:0; left:0; height:22px;
}

在加上js文件和一个gif图
在这里插入图片描述

livana.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
jQuery实现星星点赞功能

test.html<!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;
复制链接

扫一扫