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 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
微信小程序实现人脸检测功能
2018/05/25 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
Python引用传值概念与用法实例小结
2017/10/07 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
毕业生就业自荐书
2013/12/15 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
教师求职自荐信
2015/03/26 职场文书
庆七一主持词
2015/06/29 职场文书
丧事答谢词大全
2015/09/30 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python