<!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. 1.PHP与Web页面的交互

    一.概览: PHP是一种专门用于Web开发的服务器端脚本语言.从这个描述可以知道,PHP要打交道的对象主要有服务器(Server),和基于Web的HTML(超文本标识语言).使用PHP处理Web应用时 ...

  2. Linux发行版:CentOS、Ubuntu、RedHat、Android、Tizen、MeeGo

    Linux,最早由Linus Benedict Torvalds在1991年开始编写.在这之前,Richard Stallman创建了Free Software Foundation(FSF)组织以及 ...

  3. java课程之团队开发冲刺1.6

    一.总结昨天进度 1.依照视频学习了sqlite,但是由于视频的不完整性导致并不知道代码的实际效果怎么样. 二.遇到的问题 1.依据上一条,在date目录下date文件夹中,的确发现了数据库的文件,但 ...

  4. Mybatis useGeneratedKeys 填充自增主键值(使用Mysql)的原理分析

    一.Mybatis配置 <insert id="insert" parameterType="com.test.TestDO" keyProperty=& ...

  5. 网站改版应对google

    客户要求修改网站,这会给我们带来问题!为了保留他的网站权重和关键字排名,我们必须在做网站修改工作之前分析他原来网站的连接结构和标题,这样我才能更好地保证他原来网站的整体权重不会有大的变化!以下是我们根 ...

  6. Beautiful Numbers(牛客网)

    链接:https://ac.nowcoder.com/acm/problem/17385来源:牛客网 题目描述 NIBGNAUK is an odd boy and his taste is stra ...

  7. JS-正则表达式 限制输入整数、小数

    //只可以输入整数 onkeyup="value=value.replace(/[^\d]/g,'')" //可以输入数字 包括小数 onkeyup="value=val ...

  8. 【转】Cisco交换机策略路由

    [转自]https://blog.csdn.net/kkfloat/article/details/39940623 1.概念 1)策略路由(PBR)是一种比基于目标网络进行路由更加灵活的数据包路由转 ...

  9. 基本HTML结构

    配置:在vs code中声明页面为html,然后添加open in browser,view in browser插件通过快捷键alt+b实现在浏览器中查看编写好的html界面 基本成分: <! ...

  10. 获取网页title(还有一坑未填)

    def getTitle(self,url): #get title title = 'time out' try: self.res = requests.get(url,timeout=5) so ...