jQuery实现星星点赞功能

2021-07-24 09:58:49 阅读：139 来源： 互联网

标签：jQuery 星星 starON settings function 22px studyplay 点赞 var

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图
在这里插入图片描述

标签：jQuery,星星,starON,settings,function,22px,studyplay,点赞,var
来源： https://blog.csdn.net/weixin_43898383/article/details/118926546

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery实现星星点赞功能