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实现星级评分,鼠标移入和移出改变评分
原文地址：https://www.cnblogs.com/java888/p/10516891.html