Star reviews JQ

HTML structure

<Divclass= "List_item">    <span>Product Packaging Satisfaction Degree:</span>    <bclass= "Stars1"></b></Div><Divclass= "List_item">    <span>Satisfaction of delivery Speed:</span>    <bclass= "Stars2"></b></Div><Divclass= "List_item">    <span>Express Speed Satisfaction:</span>    <bclass= "Stars3"></b></Div>

JS Call

    var stars1=New Stars ($ ('. Stars1 '));     var stars2=New Stars ($ ('. Stars2 '));     var stars3=New Stars ($ ('. Stars3 '));    Stars1.creates ();    Stars2.creates ();    Stars3.creates ();

JS Details

//Star ReviewsfunctionStars (ele) { This. element=Ele;  This. Temp=ele.css (' background-position ');} Stars.prototype={creates:function(){        var_this= This; $ (_this.element). MouseMove (function(event) {_this.fnmove (); }). Click (function(event) {_this.fndown (); }). MouseLeave (function(event) {_this.fnleave ();    }); }, Fnmove:function(e) {vare=e | |window.event; vardisx=e.pagex-$ ( This. Element). Offset (). Left; if(disx<18){            $( This. Element). css (' background-position ', ' -199px-390px '); }Else if(disx<36){            $( This. Element). css (' background-position ', ' -182px-390px '); }Else if(disx<54){            $( This. Element). css (' background-position ', ' -165px-390px '); }Else if(disx<62){            $( This. Element). css (' background-position ', ' -148px-390px '); }Else if(disx<84){            $( This. Element). css (' background-position ', ' -131px-390px '); }}, Fndown:function(e) {vare=e | |window.event; vardisx=e.pagex-$ ( This. Element). Offset (). Left; if(disx<18){            $( This. Element). css (' background-position ', ' -199px-390px '); }Else if(disx<36){            $( This. Element). css (' background-position ', ' -182px-390px '); }Else if(disx<54){            $( This. Element). css (' background-position ', ' -165px-390px '); }Else if(disx<62){            $( This. Element). css (' background-position ', ' -148px-390px '); }Else if(disx<84){            $( This. Element). css (' background-position ', ' -131px-390px '); }         This. temp=$ ( This. Element). css (' background-position '); }, Fnleave:function(){        $( This. Element). css (' background-position ', This. temp); }}

Just a simple star review effect

Star reviews JQ