jquery实现星级评分,鼠标移入和移出改变评分
Posted java888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现星级评分,鼠标移入和移出改变评分相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>demo3.html</title> 5 6 <meta name="keywords" content="keyword1,keyword2,keyword3"> 7 <meta name="description" content="this is my page"> 8 <meta charset="UTF-8">
9 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 var p=0;//存放鼠标坐标 13 14 $("#star").mousemove(function(event){ //移入事件 15 var x=event.offsetX;//得到鼠标在当前元素上X轴的坐标 16 if(x>10&&x<16){ 17 x=16; 18 this.style.backgroundPosition="0px -"+x+"px";//设置背景图片的坐标 19 }else if(x>27&&x<32){ 20 x=32; 21 this.style.backgroundPosition="0px -"+x+"px"; 22 }else if(x>43&&x<48){ 23 x=48; 24 this.style.backgroundPosition="0px -"+x+"px"; 25 }else if(x>59&&x<64){ 26 x=64; 27 this.style.backgroundPosition="0px -"+x+"px"; 28 }else if(x>75&&x<80){ 29 x=80; 30 this.style.backgroundPosition="0px -"+x+"px"; 31 } 32 p=x;//将处理完的鼠标坐标存入变量 给移出事件使用 33 }); 34 35 $("#star").mouseout(function(event){//移出事件 36 if(p>=32){//判断坐标大于32 代表至少选中了一颗心 37 p=p+80; //坐标+80=黄色星星的显示行数 38 }else{ 39 p=0; //没有选中一颗心 坐标=0 40 } 41 this.style.backgroundPosition="0px -"+p+"px";//设置div背景图片坐标 42 }); 43 44 }); 45 46 </script> 47 48 49 50 <style type="text/css"> 51 #star{ 52 background-image:url("img/star-matrix.gif");/*设置背景图片*/ 53 background-repeat:no-repeat;/*背景图片不重复*/ 54 height:16px;/*设置图片的高度*/ 55 background-position:0px -0px; /*背景图像位置*/ 56 cursor:pointer;/*鼠标指针样式*/ 57 } 58 59 </style> 60 </head> 61 62 63 64 <body> 65 <!--每一颗星的宽度是16px 五颗星的宽度是 80px 每一行星的高度是16px --> 66 <h5>商品评价:</h5> 67 <div id="star" style="width:80px;" ></div> 68 69 70 </body> 71 </html>
我把图片素材也提供一下 想自己做一做的小伙伴 可以保存图片到本地 
以上是关于jquery实现星级评分,鼠标移入和移出改变评分的主要内容，如果未能解决你的问题，请参考以下文章