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>
我把图片素材也提供一下 想自己做一做的小伙伴 可以保存图片到本地 
原文地址：https://www.cnblogs.com/java888/p/10516891.html
时间： 2024-10-11 23:24:43