码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现星级评分,鼠标移入和移出改变评分

时间:2019-03-12 15:32:08      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:word   背景   tle   page   char   jquery   image   matrix   lse   

 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实现星级评分,鼠标移入和移出改变评分

标签:word   背景   tle   page   char   jquery   image   matrix   lse   

原文地址:https://www.cnblogs.com/java888/p/10516891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!