jquery代码实现简单的五星评价功能!
实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗
2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置
<script type="text/javascript"> //★ $(function () { //由于不好获取点击的span的是何坐标,所以声明一个变量来记录点击的span标签的id var mark; $("*").css({ margin: "0px", padding: "0px;" }); $("span") .css({ fontSize: "20px", color: "yellow" }) .mouseover(function () { $(this).text("★") .prevAll().text("★").end() .nextAll().text("☆").end() .click(function () { mark = $(this).attr("id"); }) }); $("div") .css({ width: "100px", height: "20px", border: "1px solid black" }) .mouseout(function () { //如果mark内有内容,则在鼠标离开div后,让星星数量变回你最近一次点击的位置 if (mark) { $("#" + mark) .text("★") .prevAll().text("★").end() .nextAll().text("☆"); } //mark中没有值,意味着你没有点击任何星星,这时,让所有的星星都黯淡吧 else { $("span").text("☆"); } }); }); </script> </head> <body> <div id="div"> <span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span><span id="5">☆</span> </div> </body>
jquery代码实现简单的五星评价功能!的更多相关文章
- javascript代码实现简单的五星评价功能!
<script type="text/javascript"> //★ var spans=document.getElementsByTagName("sp ...
- 三行Jquery代码实现简单的选项卡
今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...
- jQuery代码性能小细节
选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...
- jquery轮播图详解,40行代码即可简单解决。
我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- jQuery实现的简单分页功能的详细解析
分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- jQuery实现简单的五星好评
最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...
随机推荐
- php 解析xml 的四种方法
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
- 快速构建Windows 8风格应用17-布局控件
原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...
- hdu - 4979 - A simple math problem.(可反复覆盖DLX + 打表)
题意:一种彩票共同拥有 N 个号码,每注包括 M 个号码,假设开出来的 M 个号码中与自己买的注有 R 个以上的同样号码,则中二等奖,问要保证中二等奖至少要买多少注(1<=R<=M< ...
- bundle install 出现 'gem install mysql2 -v '0.3.15' succeeds before bunding '
bundle install 出现 'gem install mysql2 -v '0.3.15' succeeds before bunding ' 解决:sudo apt-get install ...
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- C#编程断点续传
C#编程总结(十二)断点续传 Posted on 2014-02-16 10:56 停留的风 阅读(384) 评论(3) 编辑 收藏 C#编程总结(十二)断点续传 我们经常使用下载工具,如bit精灵. ...
- 迁移Model元数据设置项
.NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项(自定义元数据提供程序) 阅读目录: 1.需求背景介绍(Model元数据设置项应该与View绑定而非ViewModel) 1 ...
- ASP.NET MVC 單元測試系列
ASP.NET MVC 單元測試系列 (7):Visual Studio Unit Test 透過 Visual Studio 裡的整合開發環境 (IDE) 結合單元測試開發是再便利不過的了,在 Vi ...
- Asp.net MVC集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- vs2013
vs2013使用初体验 刚安装好vs2013 , 初步体验了一把, 下面是我目前感受到的改变(对比vs2012) 1. 任务栏图标变了 (左边vs2013, 右边vs2012) 2. 开始界 ...