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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
详解Node全局变量global模块
Sep 28 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Python日志模块logging简介
2015/04/13 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
基于python中__add__函数的用法
2019/11/25 Python
Python如何绘制日历图和热力图
2020/08/07 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
司法助理专业自荐书
2014/06/13 职场文书
教室布置标语
2014/06/26 职场文书
购房个人委托书范本
2014/10/11 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python