<!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. abaqus2016安装过程中出现error:unable to add abaqus command directory to PATH variable

    请问abaqus2016安装过程中出现error:unable to add abaqus command directory to PATH variable是什么原因,怎么解决啊,总是安装失败 这 ...

  2. [RUNOOB]C++继承

    REF: http://www.runoob.com/cplusplus/cpp-inheritance.html 一.基类和派生类 程序: #include "stdafx.h" ...

  3. idea2018.1.5激活教程

    这是地址  链接: https://pan.baidu.com/s/1lx5AfMjADYFcQARi7_GNIw 密码: nvfi 1下载解压到任意目录(前提你能找到) 2将复制到 bin目录下 如 ...

  4. spring框架校验自定义注解

    起因: 项目开发时遇到一个问题是对于金额类型的字段,数据库中格式一般为BigDecimal类型,两位小数点,然后在接口定义中如果不定义成String类型的话,就不能使用@pattern注解限定格式,而 ...

  5. KCF:High-Speed Tracking with Kernelized Correlation Filters 的翻译与分析（一）。分享与转发请注明出处-作者：行于此路

    High-Speed Tracking with Kernelized Correlation Filters 的翻译与分析 基于核相关滤波器的高速目标跟踪方法,简称KCF 写在前面,之所以对这篇文章 ...

  6. thinkphp5 or

    $where['sq']=[ [ 'like' , '%"'.UID.'"%'] , [ 'like' , '%"'.$userinfo['depart_id'].'&q ...

  7. PhoenixFD插件流体模拟——UI布局【Preview】详解

    Liquid Preview 流体预览  本文主要讲解Preview折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Pr ...

  8. Html 内容

    1.Html就是超文本标记语言的简写,是最基础的网页语言. 2.Html是通过标签来定义的语言,代码都是由标签组成的. 3.Html代码不用区分大小写. 4.Html代码由<html>开始 ...

  9. vscode 好用插件

    1.查询文件路径../../有提示:  Path Intellisense 2.require 时的包提示(最新版的vscode已经集成此功能) : Npm Intellisense 3.自动帮你完成 ...

  10. WebForm应用log4net记录错误日志——使用线程列队写入

    我的项目结构如下图: 日志帮助类库需要log4net包:工具—NuGet包管理器—管理解决方案NuGet程序包 线程日志帮助类 FlashLogger.cs 代码 using System; usin ...