每天学一个jquery插件-五角星打分

每天一个jquery插件-五角星打分

五角星打分

嗯,很常见的打分效果的研究,反正用起来感觉还不错,关于变种的打分形式先头脑风暴一下

效果如下
每天学一个jquery插件-五角星打分_第1张图片

代码部分

*{
     
	margin: 0px;
	padding: 0px;
}
.rel{
     
	width: 200px;
	height: 40px;
	background-color: lightgray;
	z-index: 2;
}
.star{
     
	width: 40px;
	height: 40px;
	background-position:center center;
	background-size: 80% 80%;
	background-image: url(../img/0.png);
	float: left;
	z-index: 1;
}
.check{
     
	background-image: url(../img/1.png);
}


<html>
	<head>
		<meta charset="utf-8">
		<title>五角星打分title>
		<script src="js/jquery-3.4.1.min.js">script>
		<script src="js/wjxdf.js">script>
		<link href="css/wjxdf.css" rel="stylesheet" type="text/css" />
	head>
	<body>
			<div id="demo1">div>
	body>
html>
<script>
	$(function(){
      
		var temp = wjxdf("demo1");
		temp.load();
		console.log(temp.val());
	})
script>

var wjxdf = function(id){
     
	var $id = $("#"+id);
	$id.addClass("rel");
	$id.attr("data-i","-1");
	for(var i = 0;i<5;i++){
     
		var $star =$("
"
); $star.appendTo($id); } return{ $id:$id, load:function(){ var that = this; that.$id.children(".star").mousemove(function(e){ var index =$(this).attr("data-i"); that.draw(index); }) that.$id.children(".star").click(function(e){ var index =$(this).attr("data-i"); $(this).parent().attr("data-i",index); }) that.$id.mouseleave(function(e){ var index = $(this).attr("data-i"); that.draw(index) }) }, draw:function(index){ var that = this; var all =that.$id.find(".star"); for(var i =0;i<all.length;i++){ var $star = $(all[i]); var temp = $star.attr("data-i"); if(temp<=index){ $star.addClass("check") }else{ $star.removeClass("check") } } }, val:function(){ var that = this; return parseInt(that.$id.attr("data-i"))+ 1; } } }

思路解释

  • 首先知道是啥驱动这个效果的:鼠标移动与点击效果即mousemovemouselevave
  • 基础效果应该有这些:鼠标挪动的时候五角星由空心变实心,并且要存储选择的结果,在鼠标移出的时候还原到最后一次点击的效果
  • 然后我们语言描述一下就很简单了,首先父容器记录一个结果,初次渲染的时候以父容器的默认结果渲染,然后进入鼠标滑动给的效果,我们只需要知道是悬浮到哪个五角星的容器上,就取得序号然后按照这个序号把符合条件的五角星渲染实心,最后在鼠标移出的时候获得父容器记录的序号再渲染一次
  • 关于选择的效果就是点击触发,这个时候我们把点击选中的序号更新到父容器中记录的序号,交给最后一次渲染就行了
  • 最后取值就以父容器记录的序号为准
  • 关于半角星实现感觉差不多,也可以直接弄一个半角的空心与实心的左边的图片存着,不用做更多的操作,我们可以在css里面选择偶数的半角水平翻转,然后就是一模一样的效果了,不知道能不能理解我的意思,这样子后面效果完全不用改,脑补脑补~
  • 新年快乐!

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)