Jquery五角星评分效果
2016-04-20 00:00
381 查看
采用Jq Css制作的五角星评分效果,主要是利用CSS的background-image以及background-position来调整我们的背景图片,以及Jq来选择要变化的元素。代码非常简单,只有几行。
Jq:
CSS:
.formItemDiff {
width: 20px;
height: 20px;
background-image: url(http://www.pengyaou.com/food/Images/diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
Jq:
$(".formItemDiff").hover(function() { $(this).css("background-position", "0px -555px"); $(this).prevAll().css("background-position", "0px -555px"); $(this).nextAll().css("background-position", "0px -575px"); $("#pointP").html($(this).prevAll().length 1 "分"); }); }); |
width: 20px;
height: 20px;
background-image: url(http://www.pengyaou.com/food/Images/diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
相关文章推荐
- jquery强大的验证控件jquery-validate
- jquery中detach()移除元素
- 使用Jquery实现点击文字变成输入框、点击按钮刷新网页
- JQuery Ajax 详解
- jquery submit()不能提交表单
- jquery同一标签绑定多个事件的几种方式
- 【转载】jQuery Validate 菜鸟教程
- 【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
- jQuery通过input标签的name获取值
- jQuery插件开发全解析
- JQuery插件的写法
- jquery拖动代码
- jquery左右链接类似frameset的插件
- 对于jQuery中$(xxx:not(xxx))的一个范例
- jQuery制作表单验证
- jQuery学习(二)
- jquery入门 改动网页背景颜色
- 实践总结(内置福利)jQuery dom 操作
- jquery-qrcode js生成二维码,完美解决 json
- hjr-JAVA:Jquery的ajax在jsp上的实现