每天學一個jquery外掛-五角星打分
阿新 • • 發佈：2021-02-13
技術標籤：每天學一個jquery外掛javascriptjquery
每天一個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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五角星打分</title>
<script src="js/jquery-3.4.1.min.js"></ 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裡面選擇偶數的半形水平翻轉，然後就是一模一樣的效果了，不知道能不能理解我的意思，這樣子後面效果完全不用改，腦補腦補~
- 新年快樂！