<!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. React16的interactiveUpdates

    交互式更新是用户交互的结果. 它们比默认的非交互式更新(如服务器事件)具有更高的优先级. 异步模式下交互式更新的特殊之处在于,一次交互式更新可能会影响后续行为. 例如,一个表单字段上的"提交 ...

  2. 第8章 IO库 自我综合练习

    要求: 文本内容: Tom  11144455 12345678998 Jone  88888888 99999999999 1.将文本文件中的内容读入,并显示到屏幕上: 2.手动输入“Mary 77 ...

  3. C# Excel导入数据

    表 表的创建脚本 CREATE TABLE [dbo].[TB_PROJECTS_New1]( , ) NOT NULL, ) NULL, ) NULL, , ) NULL, , ) NULL, , ...

  4. python学习Day12 函数的默认值、三元表达式、函数对象（函数名）的应用场景、名称空间与作用域

    复习 1.字符串的比较: -- 按照从左往右比较每一个字符,通过字符对应的ascii进行比较 2. 函数的参数 : 1)实参与形参:       -- 形参:在函数定义时()中出现的参数       ...

  5. 【spring】使用spring过程中踩到的坑

    这里简单记录一下,学习spring的时候碰过的异常: 异常:org.springframework.beans.factory.BeanDefinitionStoreException: Unexpe ...

  6. laravel view not found

    在windows开发的laravel项目,部署到Linux服务器找不到视图,代码格式可能是这样的 return view('news\list'); 原因是在Linux下不能识别反斜杠路径,解决办法是 ...

  7. 验证当前启动APP的Package 和 Activity

    1. 打开手机USB 调试开关 2. 执行: adb devices 3.启动你的测试APP (如手机QQ) 4.执行:adb shell dumpsys window |findstr mCurre ...

  8. 实时ETL

    传统的ETL通常采用批处理的方式,一般来说是每天的夜间进行,当天的数据要到第二天才可以获得.随着数据仓库技术的逐步成熟,企业对数据仓库时间延迟的要求更高,希望达到零延迟,也就出现了实时ETL. 实时E ...

  9. Spring Boot SSL

    转载  https://howtodoinjava.com/spring-boot/spring-boot-ssl-https-example/ Spring Boot SSL 学习如何将Web应用程 ...

  10. Windows单机配置Zookeeper环境

    转自:http://www.jianshu.com/p/f7037105db46 首先要确保机器已经安装好java环境,并且配置好环境变量   http://apache.fayea.com/zook ...