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 new fun的执行过程
Aug 05 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
vue基于Teleport实现Modal组件
May 31 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
PHP4.04简明安装
2006/10/09 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php中的依赖注入实例详解
2019/08/14 PHP
jQuery随机切换图片的小例子
2013/04/18 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
golang/python实现归并排序实例代码
2020/08/30 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
市级文明单位申报材料
2014/05/07 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技