<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ol {
list-style: none;
}

li {
float: left;
cursor: pointer;
}
</style>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
var isSave = false;
$(function () {
//鼠标移到某个li标签上面,他以及他之前的都变成实心星星
$("#olStar li").mouseenter(function () {
//修改标识变量
isSave = false;
//自己变实心s
$(this).html("★").prevAll().html("★");
$(this).nextAll().html("☆");
//前面的兄弟变实心
})
//鼠标离开li标签 全部还原
$("li").mouseleave(function () {
//判断是否保存结果
if (!isSave) { $("li").html("☆"); }
})

//点击li标签 保存分数
$("li").click(function () {
isSave = true;
})

})
</script>
</head>
<body>
<ol id="olStar">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ol>
</body>
</html>

星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图的更多相关文章

  1. 【原创】用JQury来制作星星打分特效功能

    前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...

  2. 简单的jQ代码

    简单的jQ代码 /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2012 Mika Tuup ...

  3. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  4. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  5. mpvue 星星打分组件

    上图: <template> <div class="container"> <div v-for="(star,index) in sta ...

  6. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  7. 页面加载时执行JQ代码

    $(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...

  8. django模板中使用JQ代码实现瀑布流显示效果

    settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...

  9. banner轮播无缝滚动 jq代码

    HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...

随机推荐

  1. V-REP与C++初步通信测试

    打开vrep,在上方操作栏找到help选项打开,选择help topics.此时浏览器打开了vrep的操作手册user manual. 在user manual左侧目录中找到writing code ...

  2. Silverlight中验证码生成

    public class ValidationCode { Random r = new Random(DateTime.Now.Millisecond); /// <summary> / ...

  3. NPOI 修改已存在的excel文件，设置第一行行高

    FileStream fileStream = new FileStream(@FileName, FileMode.Open, FileAccess.Read); FileStream fileSt ...

  4. getPageNumRange

    <script> function getPageNumRange(pagenumstr) { var pages=pagenumstr.split(";"); pag ...

  5. Serv-U 配置说明（虚拟路径、网络驱动器、个人文件夹，数据库管理）

    实现效果 1.用户数据存在数据库,可以自己修改. 2.支持匿名用户使用部分功能 3.每个用户均有私人文件夹,可以自己存放文件 4.FTP内主要的文件都在存储内,不存在服务器上 匿名用户访问情况: 普通 ...

  6. unable to resolve module react-native-gesture-handler from

    在安装了npm install --save react-navigation后跑项目然后就红屏了. 解决方法: 安装触摸方式(需要执行以下方法) npm install --save react-n ...

  7. c3p0数据源的第一次尝试

    开始补习 以前学习过的基础 正在尝试从c3p0 获取到connection 好的,首先上代码吧 public static DataSource ds = null; static { ComboPo ...

  8. [InstFiles]在Inno中打包隐藏和系统文件的头文件

    本文来自:http://www.kngstr.com 简介: 一直以来,Inno的作者都没有提供打包隐藏文件和系统文件的功能. 但是,如果我们做批量打包,批量封装的时候,总会需要这样的功能,因为我们不 ...

  9. jQuery实现动态分割div

    转自:https://www.cnblogs.com/herd/p/6014848.html 演示地址:http://www.vfkjsd.cn/div/2/div.html

  10. 解决Jenkins用shell脚本部署后，Jenkins自动杀掉启衍生出来的守护进程

    Jenkins部署java项目遇到的问题: 1.Jenkins执行构建后,需要手动执行startup.sh,站点才能正常访问 产生原因: shell脚本发布时,会衍生进程,Jenkins默认会自动杀掉 ...