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中正则表达式的全局匹配模式分析
Apr 26 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP序列化操作方法分析
2016/09/28 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
node.js入门学习之url模块
2017/02/25 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python 拼接文件路径的方法
2018/10/23 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
pytorch实现线性拟合方式
2020/01/15 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
护士个人年度总结范文
2015/02/13 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
死亡诗社观后感
2015/06/05 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫