使用javascript超时调用模拟QQ划过头像，从侧边显示等级

最新推荐文章于 2024-06-11 21:19:51 发布
最新推荐文章于 2024-06-11 21:19:51 发布
阅读量146 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangqling/article/details/82776444
版权

1.、当鼠标滑过头像时，让侧边显示出来 。

2、当鼠标离开头像时，让侧边延时消失，防止用户离开头像划向侧边时，由于中间有间隙侧边消失，增加超时调用。

3、当鼠标滑过侧边时，侧边显示出来，

4、当鼠标从侧边划向头像时，防止用户离开侧边划向头像时，由于中间有间隙侧边消失，增加超时调用。

5、如果用户划回头像，则侧边显示，如果划向其他区域则侧边消失。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移入延时</title>
	<style>
		.box{
			position: relative;
			width: 300px;
			height: 600px;
			margin:0 auto;
			background-color: blue;
			border-radius: 16px;
			box-shadow: 1px 1px 10px 2px orange;
			padding: 20px 10px 0;
			font-size: 20px;
			box-sizing:border-box;
			
		}
		.children{
			position: absolute;
			top:0;
			right: 108%;
			width: 200px;
			height: 200px;
			border-radius: 6px;
			background-color: gray;
			display: none;
			padding: 20px 10px 0;
			font-size: 16px;
			box-sizing:border-box;
			color: #fff;
		}
		.child{
			position: absolute;
			top:60px;
			left: 20px;
			width: 80px;
			height: 80px;
			background-color: purple;
			border-radius: 6px;
			box-shadow: 1px 1px 10px 2px orange;
			line-height: 80px;
			text-align: center;
			color: red;
			cursor: pointer;
		}
	</style>
	<script>
		window.onload=function(){
			var oDiv1=document.getElementById("div1");
			var oDiv2=document.getElementById("div2");
			var timer=null;
			oDiv1.onmouseover=oDiv2.onmouseover=function(){
				oDiv1.style.display="block";
				clearTimeout(timer);
				
			}
			oDiv1.onmouseout=oDiv2.onmouseout=function(){
				timer=setTimeout(function(){
					oDiv1.style.display="none";
				},600);
			}

			//简化前代码：
			// oDiv2.onmouseover=function(){
			// 	oDiv1.style.display="block";
			// 	clearTimeout(timer);
				
			// }
			// oDiv2.onmouseout=function(){
			// 	timer=setTimeout(function(){
			// 		oDiv1.style.display="none";
			// 	},600);
			// }
			// oDiv1.onmouseover=function(){
			// 	oDiv1.style.display="block";
			// 	clearTimeout(timer);
				
			// }
			// oDiv1.onmouseout=function(){
			// 	timer=setTimeout(function(){
			// 		oDiv1.style.display="none";
			// 	},600);
			// }
		}
	</script>
</head>
<body>
	<div class="box">欢迎使用QQ2098
		<div class="children" id="div1">您的QQ等级为999级</div>
		<div class="child" id="div2">头像</div>
	</div>
</body>
</html>

成果展示：

 

 

qianlingvip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IOS UIWebView (API+JS交互)、WKWebView
爱技术....爱生活！
12-14 1541
WebView使用 webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.frame), 500)]; webView.delegate = self; [self.view addSubview:webView]; //设置URL
浅谈JavaScript超时调用和间歇调用
10-23
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
java 模仿QQ等级计算，星星月亮太阳
kenneth95的博客
12-25 294
int moonRule = 4;//月亮需要的等级 int sunRule = 16;//太阳需要的等级 int crownRule = 64;//冠需要的等级 int level = 5;//当前等级 int sun = 0, moon = 0, stars = 0, crown = 0; crown = level / crownRule;//冠 sun = level % crownRule / sunRule;//太阳 moon = level % sunRule / moonRule;//月亮.
运维系列.在Docker中使用Grafana
jclee95的个人博客
06-11 1365
基于Docker部署grafana相关记录。
【Auto.JS】Autojs官方提取文档使用说明函数 (2)
热门推荐
小宋小宋
07-10 1万+
接上一篇文章：Autojs官方提取文档使用说明函数 (1) Images Stability: 2 - Stable images模块提供了一些手机设备中常见的图片处理函数，包括截图、读写图片、图片剪裁、旋转、二值化、找色找图等。 该模块分为两个部分，找图找色部分和图片处理部分。 需要注意的是，image对象创建后尽量在不使用时进行回收，同时避免循环创建大量图片。因为图片是一种占用内存比较大的资源，尽管Auto.js通过各种方式（比如图片缓存机制、垃圾回收时回收图片、脚本结束时回收所有..
Vue.js2最佳实践(持续更新至Vue.js3出来)
天下布武
08-07 1717
写在开头 文档较长，可按需耐心反复阅读。其中带（官）的是直接引用了Vue官方的风格指南。针对Vue性能优化相关内容，单独在内容后进行了标注，可通过搜索“性能优化”四个字查找。 Vue.js2模板工程说明 目的 封装常用功能和配置，规范代码编写，保证输出的一致性，方便前端人员在此基础上快速开发新项目的业务模块。 下载 模板项目（Boilerplate）分为JavaScript和TypeScript两个版本。 JS： git clone https://github.com/THS-FE/vue2-starte
vscode默认设置
leng_nuo的博客
04-19 7554
默认设置（json）,是defaultSettings.json文件 { // 启用后，差异编辑器将忽略前导空格或尾随空格中的更改。 "diffEditor.ignoreTrimWhitespace": true, // 超时（以毫秒为单位），之后将取消差异计算。使用0表示没有超时。 "diffEditor.maxComputationTime": 5000, // 控制差异编...
autojs 开发文档集合
九黎AJ的博客
09-28 1万+
加入我们的QQ群553908361,和各作者同群交流 教程会优先发布于收费脚本v群。 该代码选自于aj开发者的文档,群里有人反馈开发文档打开慢.所以做了这个.方便搜索.如有侵权,请私信我进行删除 同时也上传了一份源码到点击网站,供大家更快的查询代码 Auto.js Pro-8.1.0 文档 索引 | 查看全部 目录 综述 Q & A 如何定时运行脚本 定时任何如何获取外部参数 如何把图片和脚本一起打包，或者打包多个脚本 如何使打包的应用不显示主界面 Auto.js自带的模块和函数中没有的功能如.
20212022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)、前端面试题大全、前端进阶必知必会知识点
南北极之间
11-15 1万+
1、JavaScript数组的常用方法有哪些？ 答：push、pop、shift、unshift、join、sort、concat、reverse、splice、slice、indexOf等 详细资料： JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问_勤动手多动脑少说多做-CSDN博客_js数组倒序输出1.　Array.push()向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。一个：var fruits = ["Banana", "
【Blog】Hexo_Next_博客搭建记 (by onlychristmas)
Jasmine_dream
07-16 551
Jekyll 阮一峰 一篇全面的打博客简介 一个详细的博客搭建过程 详细的搭建过程 Jekyll 搭建 一个炫酷的个人博客！ 一个 Hexo 搭建在GitHub 上的博客 知乎上搭建博客的问题 一个HEXO案例 怎么用GitHub Pages 师兄的博客，有空研究吃透 一个简洁的模板，作为参考 知乎上的问答 github pages + HEXO + 域名绑定 ...
javascript学习笔记(十五) js间歇调用和超时调用
10-28
javascript学习笔记之js间歇调用和超时调用介绍，学习js的朋友可以参考下
javascript模拟qq头像处理
11-17
javascript实现的和qq头像处理功能相似
wx470校园保修系统小程序-springboot+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
基于web的校园报修系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，总之，基于web的校园报修系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。维修人员管理页面，此页面提供给管理员的功能有：查看已发布的维修人员数据，修改维修人员，维修人员作废，即可删除，还进行了对维修人员名称的模糊查询 维修人员信息的类型查询等等一些条件。故障上报管理页面，此页面提供给管理员的功能有：根据故障上报进行条件查询，还可以对故障上报进行新增、修改、查询操作等等。论坛信息管理页面，此页面提供给管理员的功能有：根据论坛信息进行新增、修改、查询操作等等。
wx447火锅店点餐系统-ssm+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
本火锅店点餐系统采用Java语言和Vue技术，框架采用SSM，搭配Mysql数据库，运行在Idea里，采用小程序模式。本火锅店点餐系统提供管理员、用户两种角色的服务。总的功能包括菜品的查询、菜品的购买、餐桌预定和订单管理。本系统可以帮助管理员更新菜品信息和管理订单信息，帮助用户实现在线的点餐方式，并可以实现餐桌预定。本系统采用成熟技术开发可以完成点餐管理的相关工作。 本系统的功能围绕用户、管理员两种权限设计。根据不同权限的不同需求设计出更符合用户要求的功能。本系统中管理员主要负责审核管理用户，发布分享新的菜品，审核用户的订餐信息和餐桌预定信息等，用户可以对需要的菜品进行购买、预定餐桌等。用户可以管理个人资料、查询菜品、在线点餐和预定餐桌、管理订单等，用户的个人资料是由管理员添加用户资料时产生，用户的订单内容由用户在购买菜品时产生，用户预定信息由用户在预定餐桌操作时产生。 本系统的功能设计为管理员、用户两部分。管理员为菜品管理、菜品分类管理、用户管理、订单管理等，用户的功能为查询菜品，在线点餐、预定餐桌、管理个人信息等。 管理员负责用户信息的删除和管理，用户的姓名和手机号都可以由管理员在此功能里看到。管理员可以对菜品的信息进行管理、审核。本功能可以实现菜品的定时更新和审核管理。本功能包括查询餐桌，也可以发布新的餐桌信息。管理员可以查询已预定的餐桌，并进行审核。管理员可以管理公告和系统的轮播图，可以安排活动。管理员可以对个人的资料进行修改和管理，管理员还可以在本功能里修改密码。管理员可以查询用户的订单，并完成菜品的安排。 当用户登录进系统后可以修改自己的资料，可以使自己信息的保持正确性。还可以修改密码。用户可以浏览所有的菜品，可以查看详细的菜品内容，也可以进行菜品的点餐。在本功能里用户可以进行点餐。用户可以浏览没有预定出去的餐桌，选择合适的餐桌可以进行预定。用户可以管理购物车里的菜品。用户可以管理自己的订单，在订单管理界面里也可以进行查询操作。
【独家首发】Matlab实现金枪鱼优化算法TSO优化Transformer-BiLSTM实现负荷数据回归预测.rar
07-20
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
物联网工程_基于ZigBee技术的图书馆节约用电管理系统设计.docx
07-20
物联网工程_基于ZigBee技术的图书馆节约用电管理系统设计
算法与数据结构 分布式算法课程 第13章 实用互斥算法.具有读-修改-写操作的算法 共72页.pdf
07-20
【课程大纲】 第01章 简介 共68页.pdf 第02章 分布式算法简介 共59页.pdf 第03章 集群领导选举 分布式锁 共83页.pdf 第04章 通用同步网络的集群领导选举 共69页.pdf 第05章同步网络中的基础计算 共76页.pdf 第06章 分布式一致性 共48页.pdf 第07章 Byzantine协议 共34页.pdf 第08章 异步系统模型 共47页.pdf 第09章 基本异步网络算法 共71页.pdf 第10章 同步化器 共39页.pdf 第11章 异步共享内存系统 共49页.pdf 第12章 ASM - Peterson’s算法 共43页.pdf 第13章 实用互斥算法.具有读-修改-写操作的算法 共72页.pdf
Python-函数.doc
最新发布
07-20
Python

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值