jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理:

当鼠标移入某个星星,前面的星星都会被点亮;当鼠标移出,星星将会变暗,单击某个星星后,即可完成评论,此时鼠标移出后,被单击星星前面的星星都会被点亮,后面的星星变暗。

二、操作步骤:

(1)HTML结构:定义一个ul列表,ul中包含5个li元素,每个li元素对应一个星星的位置,通过css代码为li元素设置背景图来完成星星的展示,点亮和变暗的星星都在一张图片上,通过切换背景图的显示位置,可以实现星星点亮和变暗的效果。

(2)jQuery特效:需要为li元素注册3个事件,分别为鼠标移入、鼠标单击和鼠标移出,这3个事件的处理函数中分别需要实现的功能。

   1)鼠标移入星星:为当前的li元素和它前面所有的li元素添加一个预定义的css样式“li”,通过将background-position设置为0px -29px实现点亮星星的特效;

   2)鼠标单击星星:获得当前星星位置b并设置flag=0用于表明实现单击操作;

   3)鼠标移出星星:获取flag判断鼠标是否单击星星,然后通过改变当前的li的background-position设的位置实现星星变暗的效果;

框架代码部分:

1)星级评价关键代码

2)图形跟随指针移动关键代码

1、实验中出现过的问题或错误分析

1)在进行鼠标移入星星变亮操作时因为对css相关属性的把握不清楚代码书写成

$(this).css('background-position','0 29px');导致星星不能正常变亮;

2)在进行指针跟随时应为对offset的相关功能以及用法不够了解导致图片不能跟随鼠标;

3)自己对于CSS知识遗忘过多导致开始时的页面框架不能清楚的设计;

4)自己直接书写代码没有事先进行逻辑分析导致代码的书写一波三折;

2、保证实验成功(或程序运行正确)的关键问题

1)在进行鼠标移入星星变亮操作时将29px前面加上“-”即$(this).css('background-position','0 -29px');

2)应该将自己的基础知识打牢固,熟练的掌握JQuery相关知识以便后续操作;

3)将指针跟随代码更改成$('img').offset({'top':e.pageY,'left':e.pageX})然后更好的进行下步操作;

4)在进行星级评价设计时要有清晰的逻辑构思才能方便后续代码的书写;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/663209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法训练营day20,二叉树9

type TreeNode struct { Val int Left *TreeNode Right *TreeNode } //669. 修剪二叉搜索树 //本题与450. 删除二叉搜索树中的节点 相似,不同之处在于本题删除不止一个节点,450不需要遍历全部二叉树,但本题需要全部遍历,而且…

数据结构—静态查找

简介 1. 数据的组织和查找是大多数应用程序的核心 2. 线性表、树、图是数据的组织结构 3. 查找是所有数据处理中最基本、最常用的操作 4. 当在一个庞大数量的数据集合中查找时,查找方法和效率就显得格外重要 查找介绍 1. 查找包含四种操作:查询、检…

幻兽帕鲁社区服务器搭建架设开服教程(LINUX)

幻兽帕鲁社区服务器搭建架设开服教程(LINUX) 大家好我是艾西,上一期我给大家分享了windows系统版本的幻兽帕鲁服务器搭建教程。因为幻兽帕鲁这游戏对于服务器的配置有一定的要求很多小伙伴就思考用linux系统搭建的话占用会不会小一点&#x…

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

2024年1月25日,中国人工智能产业发展联盟智能化软件工程工作组(AI for Software Engineering,下文简称AI4SE)在京召开首届“AI4SE创新巡航”活动。在活动上,华为云大模型辅助系统测试代码生成荣获“2023AI4SE银弹优秀案…

cortexM c语言和汇编嵌套编程

编程环境是:stm32cubeIde 原因:很多操作需要使用底层来做,比如中断时的上下文数据保存。也就是说用到汇编来实现。 疑问:c语言怎么才能跟汇编很好的兼容在一起呢?必将是我下一步的必经探索之路了。 一、C语言和汇编兼容格式 asm( 汇编字符串 : 输出约束字符串 …

C++哈希表map映射

开房门 时间限制:1.000S 空间限制:128MB 题目描述 假设你手里有一串钥匙,这串钥匙上每把钥匙都有一个编号,对应着一个房门的编号。现给你一个房门编号,你需要判断是否能够打开该房门。 输入描述 测试数据共有多组…

代码随想录算法训练营第二十四天| 77. 组合。

77. 组合 题目链接:组合 题目描述: 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 解题思路: 本题是经典的回溯法解决的组合问题,回溯问题搞清楚纵向递归横向遍历即…

混乱字母排序——欧拉路数论

题目描述 小明接到一个神秘的任务:对于给定的 n 个没有顺序的字母对(无序代表这两个字母可以前后顺序颠倒,区分大小写)。请构造一个有 (n1) 个字母的混乱字符串使得每个字母对都在这个字符串中出现。 输入输出格式 输入格式 第…

KVM虚拟机MAC地址冲突,引发服务器对xshell说:Go away!

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 开场白 最近在机房的服务器上装kvm虚拟主机。 不经意间,上演了一场由MAC地址异常而引发的服务器与xshell之间的血案…

宠物商业数据分析

一、宠物热销品类分布 欧睿国际更有一份数据表明,宠物食品在所有“它经济”中占比是最大,仅仅是猫狗食品就达到了59.1%,增速也远高于其他宠物用品。 2018年,中国就已经有超7700万独居成年人口,国内养宠主力军中90后占…

c++阶梯之auto关键字与范围for

auto关键字&#xff08;c11&#xff09; 1. auto关键字的诞生背景 随着程序的逐渐复杂&#xff0c;程序代码中用到的类型也越来越复杂。譬如&#xff1a; 类型难以拼写&#xff1b;含义不明确容易出错。 比如下面一段代码&#xff1a; #include <string> #include &…

nginx无法启动,win10占用80端口 (注册表方式解决)

参考&#xff1a;https://blog.csdn.net/qq_39523111/article/details/128853509 改为4 重启后 不再占用 pid 不是4了 已经变为nginx了 改为0 没起作用 发现 80端口还是被 4占用 可以 把 服务中的 SQL Server Reporting Services关掉

使用深度学习框架飞浆Paddle实现的鲜花识别任务

PaddlePaddle&#xff08;飞桨&#xff09;是百度公司开发的深度学习框架&#xff0c;具有易用、高效、灵活和可伸缩等特点。以下是关于PaddlePaddle框架的详细介绍&#xff1a; 易用性&#xff1a;PaddlePaddle框架提供了Python作为主要的前端语言&#xff0c;并提供了丰富的…

2024年美赛B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…

【疑问】为什么声明和定义要分离

前言 我们在学习的时候接触过一个话&#xff1a;编写自定义函数的时候 要做到声明和定义分离 那么为什么呢 今天就来简单的了解一下 疑问&#xff1a;错误的发生 下面给出两个源文件和一个头文件以及报错信息 text.cc文件 #include"head.h"int main() {int a 1…

总是提示安装不了tensorflow

折腾了好久&#xff0c;不知道为啥装不上&#xff0c;我参考了链接大神链接 pypi.python.org在国内被墙了&#xff0c;无法从python官网url下载。 pip install xxx -i http://pypi.douban.com/simple --trusted-host pypi.douban.com pip3 install -i https://pypi.tuna.tsin…

Backtrader 文档学习- Analyzers - Analyzers Reference(上)

Backtrader 文档学习- Analyzers - Analyzers Reference&#xff08;上&#xff09; 1.Analyzers 对象 用于对照参考中涉及的方法和属性。 anal bt.analyzers str_attr for i in dir(anal) :if i[:1] ! _:str_attr i , print (str_attr) 属性方法&#xff1a…

Pytroch 自写训练模板适合入门版 包含十五种经典的自己复现的一维模型 1D CNN

训练模板 在毕业之前&#xff0c;决定整理一下手头的代码&#xff0c;自己做1D-CNN这吗久&#xff0c;打算开源一下自己使用的1D-CNN的代码&#xff0c;包括用随机数生成一个模拟的数据集&#xff0c;到自己写的一个比较好的适合入门的基础训练模板&#xff0c;以及自己复现的…

2020年CSP-J认证 CCF非专业级别软件能力认证第一轮真题--完善程序题

2020 CCF认证第一轮&#xff08;CSP-J&#xff09;真题 三、完善程序题 第一题 质因数分解 给出正整数n&#xff0c;请输出将n质因数分解的结果&#xff0c;结果从小 到大输出。 例如&#xff1a;输入n120程序应该输出2 2 2 3 5,表示1202 X 2 X 2 X 3 X 5输入保2≤n≤10^9提…

个人建站前端篇(二)项目采用服务端渲染SSR

SSR的优点 更好的SEO首屏加载速度更快&#xff0c;用户体验更好可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用&#xff0c;而不需要在后端模板系统和前端框架之间来回切换。 Vue生态中的SSR通用解决方案 Nuxt是一个构建于 Vue 生态系统之上的全栈框…