每天一个jquery插件-五角星打分
五角星打分
嗯，很常见的打分效果的研究，反正用起来感觉还不错，关于变种的打分形式先头脑风暴一下
效果如下
代码部分
*{
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);
}
<!DOCTYPE html>
<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 =$("<div class='star' data-i='"+i+"'></div>");
$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;
}
}
}
思路解释
- 首先知道是啥驱动这个效果的：鼠标移动与点击效果即
mousemove与mouselevave - 基础效果应该有这些：鼠标挪动的时候五角星由空心变实心，并且要存储选择的结果，在鼠标移出的时候还原到最后一次点击的效果
- 然后我们语言描述一下就很简单了，首先父容器记录一个结果，初次渲染的时候以父容器的默认结果渲染，然后进入鼠标滑动给的效果，我们只需要知道是悬浮到哪个五角星的容器上，就取得序号然后按照这个序号把符合条件的五角星渲染实心，最后在鼠标移出的时候获得父容器记录的序号再渲染一次
- 关于选择的效果就是点击触发，这个时候我们把点击选中的序号更新到父容器中记录的序号，交给最后一次渲染就行了
- 最后取值就以父容器记录的序号为准
- 关于半角星实现感觉差不多，也可以直接弄一个半角的空心与实心的左边的图片存着，不用做更多的操作，我们可以在css里面选择偶数的半角水平翻转，然后就是一模一样的效果了，不知道能不能理解我的意思，这样子后面效果完全不用改，脑补脑补~
- 新年快乐！