每天学一个jquery插件-五角星打分2
五角星打分2
把打分的半角效果实现了，就改动了一点点
效果如下
代码部分
*{
margin: 0px;
padding: 0px;
}
.rel{
width: 200px;
height: 40px;
background-color: lightgray;
z-index: 2;
}
.star{
width: 20px;
height: 40px;
background-position:center center;
background-size: 100% 100%;
background-image: url(../img/00.png);
float: left;
z-index: 1;
background-repeat: no-repeat;
}
.star:nth-of-type(even){
transform: rotateY(180deg);
}
.check{
background-image: url(../img/01.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();
})
</script>
var wjxdf = function(id){
var $id = $("#"+id);
$id.addClass("rel");
$id.attr("data-i","-1");
for(var i = 0;i<10;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;
}
}
}
解释思路
- 就着前面的写法来的，就是给了一个伪类选择，目的就是把偶数个的半角水平翻转一下
- 图片素材在下面
- 然后就没啥可说的了，当然这里面有一点区别就是一个是图片大小随便，但是搞半角为了让俩边拼凑起来像是一个完整的星所以得对图片处理一下，就是占满这个图片的大小就行了。
- 如果在头脑风暴一下，像进度条一样的评分功能也可以实现不过这个时候单纯的图片拼凑就没法做了，不过大概思路还是能理清的，用过ps的就可以懂我意思
- 在ps里面有个叫蒙版的东西，其实在页面效果里面也是有差不多的实现方式，所以有了蒙版那就可以模仿实现上述效果了。