<!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. EFM32之GPIO

    配置时钟: void CMU_ClockEnable(CMU_Clock_TypeDef clock, bool enable) CMU_ClockEnable(cmuClock_HFPER, tru ...

  2. myeclise2017安装包及破解文件

    亲测可用! myeclipse2017安装包 链接:https://pan.baidu.com/s/13R1wk7mI9ECjEByanIbHDA 提取码:vaeb myeclipse2017破解包 ...

  3. 关于ASP.NET 服务器报错 Server Error in '/' Application Runtime Error 错误及解决方法

    今天遇到一个错误 程序在服务器上运行时报错 先贴上错误代码 自己也在网上找了一些解决方法,把错误定位到服务器的配置文件也就是Web.config的问题, 于是在system.web节点下 加上cust ...

  4. 转载：IIS 之 连接数、并发连接数、最大并发工作线程数、队列长度、最大工作进程数

    一.IIS连接数 一般购买过虚拟主机的朋友都熟悉购买时,会限制IIS连接数,顾名思义即为IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫“IIS限制连接数”. 客户请求的连接内容包括: [ ...

  5. python note 15 正则表达式

    # 正则表达式 只和字符串打交道 # 正则表达式的规则# 规则 字符串 从字符串中找到符合规则的内容 # 字符组 : [] 写在中括号中的内容,都出现在下面的某一个字符的位置上都是符合规则的 # [0 ...

  6. C# 线程获取/设置控件(TextBox)值

    线程读写控件需要用委托(delegate)与Invoke/BeginInvoke来进行 参考内容:http://www.cnblogs.com/runner/archive/2011/12/30/23 ...

  7. IDEA 开发环境中设置Subversion，遇到svn安装路径包含空格无法使用版本控制的解决办法

    假如你的svn.exe的安装位置是:C:\Program Files\TortoiseSVN\bin\svn.exe,路径中包含空格. 1.File->Settings->Version ...

  8. leetcode26： 删除排序数组中的重复项

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  9. 分析easyswoole3.0源码，服务启动为例（一）

    swoole已经升级到4了,主要的特性是更好的支持协程,easyswoole也为了更好支持协程推出了es3.我本地环境是php7.2.9 centos7 在github下载最新的3.0的demo.地址 ...

  10. 《笨方法学Python》加分题17

    题目通过前学习的文件操作把一个文件中的内容拷贝到另一个文件中,并使用 os.path.exists 在拷贝前判断被拷贝的文件是否已经存在,之后由用户判断是否继续完成拷贝. 新知识os.path.exi ...