jQuery基于图层模仿五星星评价功能的方法


Posted in Javascript onMay 07, 2015

本文实例讲述了jQuery基于图层模仿五星星评价功能的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
$(function(){ 
$(".star li").mouseenter(function(){
 $(".star li").css("background","#f60");
 $(this).css("background","#f60");
 $(this).nextAll().css("background","#ccc");
 })
});
</script>
<style type="text/css">
* {<br />
 padding:0;margin:0;
 list-style:none; float:left;
 }
.star li {
 float: left;
 height: 20px;
 width: 20px;
 background-color: #CCC;
 margin-right: 4px;
}
</style>
</head>
<body>
<div>选几星:</div>
<ul class="star">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取网页标题代码实例
Jan 22 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
jQuery实现的多屏图像图层切换效果实例
May 07 #Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 #Javascript
jQuery团购倒计时特效实现方法
May 07 #Javascript
js由下向上不断上升冒气泡效果实例
May 07 #Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
You might like
php语法检查的方法总结
2019/01/21 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
理解javascript异步编程
2016/01/27 Javascript
Angular路由简单学习
2016/12/26 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python global和nonlocal用法解析
2020/02/03 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
实习求职信
2013/12/01 职场文书
网吧消防安全制度
2014/01/28 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
3分钟演讲稿
2014/04/30 职场文书
求职信结尾怎么写
2014/05/26 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
听课评课活动心得体会
2016/01/15 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL