星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图
<!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效果如下图的更多相关文章
- 【原创】用JQury来制作星星打分特效功能
前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...
- 简单的jQ代码
简单的jQ代码 /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2012 Mika Tuup ...
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- js点亮星星评分并获取参数的js代码
点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...
- mpvue 星星打分组件
上图: <template> <div class="container"> <div v-for="(star,index) in sta ...
- jquery模仿淘宝星星打分
今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...
- 页面加载时执行JQ代码
$(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...
- django模板中使用JQ代码实现瀑布流显示效果
settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...
- banner轮播无缝滚动 jq代码
HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...
随机推荐
- appium初步认识
Appium简介: appium官网:http://appium.io/ 一.什么是appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS. ...
- easyui的datagrid某个字段return一个a链接
实现方法用 formatter formatter: function(value, row, index) { return '<a href="javascript:void(0) ...
- 1、let const
1.作用域的概念 es6之前 es5 分为 全局作用域 函数作用域 es6 新增块级作用域 2.let const 与 var 区别 用var 可以无报错 此代码报错 引出 块级作用域 用 {} 包起 ...
- 定点CORDIC算法求所有三角函数及向量模的原理分析、硬件实现（FPGA）
一.CORDIC算法 CORDIC(Coordinate Rotation DIgital Computer)是一种通过迭代对多种数学函数求值的方法,它可以对三角函数.双曲函数和平面旋转问题进行求解. ...
- Exp5 MSF基础应用 20165110
Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...
- idea报错Target JRE version (1.8.0_191) does not match project JDK version (java version "1.7"), will use sources from JDK: 1.8
使用mac的idea 启动项目,总是报一个问题 我在idea中添加了多个jdk,项目启动的时候就只是配置了一个正确的,项目的配置完全正确.但是配置好tomcat后,启动就会报这个错误. 解决方案:需要 ...
- Ubuntu16.04 git上网速度慢的解决方法.
1.打开网站 IPAddress.com ,输入github.com和github.global.ssl.fastly.net,获取他们的域名对应的ip地址 2.sudo vi /etc/hosts ...
- 微信小程序记账本进度七
最后大体上完成了,但是好像少了点功能,整体并不是特别华丽
- CentOS7+CDH5.14.0安装全流程记录，图文详解全程实测-总目录
CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-总目录: 0.Windows 10本机下载Xshell,以方便往Linux主机上上传大文件 1.CentOS7+CDH5.14.0安 ...
- Solidity知识点集 — 溢出和下溢
合约安全增强: 溢出和下溢 什么是 溢出 (overflow)? 假设我们有一个 uint8, 只能存储8 bit数据.这意味着我们能存储的最大数字就是二进制 11111111 (或者说十进制的 2^ ...