当前位置： 首页 > news >正文

HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效

news 2026/4/3 1:57:58

实例：九宫格图片鼠标移入移出方向感知特效

技术栈：HTML+CSS+JS

效果：

源码：

【HTML】

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>九宫格图片鼠标移入移出方向感知特效</title><link rel="stylesheet" href="184.css">
</head><body><ul class="container"><li><img src="/images/184/1.jpg" alt=""><p>也许你永远都不会知道，你的一句话，我会记得很久；你的一个不以为然的承诺，我却苦苦守侯。

相关文章：

HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效

实例：九宫格图片鼠标移入移出方向感知特效 技术栈：HTML+CSS+JS 效果： 源码： 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&…...

编程日记 2023/12/1 8:59:06

在Rust中编写自动化测试

1.摘要 Rust中的测试函数是用来验证非测试代码是否是按照期望的方式运行的, 测试函数体通常需要执行三种操作:1.设置任何所需的数据或状态;2.运行需要测试的代码;3.断言其结果是我们所期望的。本篇文章主要探讨了Rust自动化测试的几种常见场景。 2.测试函数详解 在Rust项目工…...

编程日记 2023/12/1 8:58:05

羊大师提问，为什么吃得越咸越容易出现健康问题？

羊大师提问&#xff0c;为什么吃得越咸越容易出现健康问题&#xff1f; 在现代社会中&#xff0c;有一种追求咸味食物的趋势&#xff0c;许多人都钟爱于吃咸味食物。吃咸味食物往往容易导致健康问题&#xff0c;引发各种疾病。那么为什么吃的越咸越容易生病呢&#xff1f; 今…...

编程日记 2023/12/1 8:57:04

linux ld 链接器学习笔记

ld链接器笔记 1. 首先编写一段汇编代码 这里的汇编语法时 AT&T语法,是gcc原生支持的语法,底层使用 gas(gnu assembler) 完成汇编,相较于 Intel x86语法, AT&T 语法要更加古老,因此大多数人更加偏向于使用 Intel 的语法. nasm 编译器支持x86语法.自从2.10版本&#xf…...

编程日记 2023/12/1 8:55:02

栈模拟先序后序中序遍历（非递归遍历）

先序遍历&#xff1a; vector<int> preorderTraversal(TreeNode* u) {stack<TreeNode*>stk;vector<int>res;if(unullptr) return res;while(stk.size()||u){if(u){res.push_back(u->val);//遍历当前结点stk.push(u);//记录当前递归层uu->left;//遍历左…...

编程日记 2023/12/1 8:54:00

linux 内核软中断介绍

在介绍软中断之前&#xff0c;先来介绍一个概念&#xff1a;中断下半部&#xff1a; 为了避免处理复杂的中断嵌套&#xff0c;中断处理程序是在关闭中断的情况下执行的。可是&#xff0c;如果关闭中断的时间太长&#xff0c;可能导致中断请求丢失。例如周期时钟每隔 10 毫秒发送…...

编程日记 2023/12/1 8:51:56

软考：2024年软考高级：软件工程

软考&#xff1a;2024年软考高级: 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#xff08;1…...

编程日记 2023/12/1 8:50:54

Kubernetes（K8s）_15_CNI

Kubernetes&#xff08;K8s&#xff09;_15_CNI CNI网络模型UnderlayMAC VLANIP VLANDirect Route OverlayVXLAN CNI插件FlannelCalico CNI配置内置实现 CNI CNI(Container Network Interface): 实现容器网络连接的规范 Kubernetes将网络通信可分为: Pod内容器、Pod、Pod与Se…...

编程日记 2023/12/1 8:49:53

python 生成器的作用

1. 生成器 参考&#xff1a; https://www.cainiaojc.com/python/python-generator.html 1.1. 什么是生成器&#xff1f; 在 python 中&#xff0c;一边循环一边计算的机制&#xff0c;称为生成器&#xff1a;generator. 1.2. 生成器有什么优点&#xff1f; 1、节约内存。p…...

编程日记 2023/12/1 8:48:52

第十五届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组（详细分析解答）

目录 1.相不相等 1.1 题目要求 1.2 题目分析 1.3 源代码 2.三行情书 2.1 题目要求 2.2 题目分析 2.3 源代码 3.电影院在线订票 3.1 题目要求 3.2 题目分析 3.3 源代码 4.老虎坤&#xff08;不然违规发不出来&#xff09; 4.1 题目要求 4.2 题目分析 4.3 源代码 …...

编程日记 2023/12/1 8:47:49

图解系列--HTTPS，认证

确保 Web 安全的HTTPS 1.HTTP 的缺点 1.1.通信使用明文可能会被窃听 加密处理防止被窃听 加密的对象可以有这么几个。 (1).通信的加密 HTTP 协议中没有加密机制&#xff0c;但可以通过和 SSL&#xff08;Secure Socket Layer&#xff0c;安全套接层&#xff09;或TLS&#xff…...

编程日记 2023/12/1 8:45:43

element plus中表格的合计属性和例子

在 element plus 表格中&#xff0c;您可以使用 summary-method 属性来指定一个函数&#xff0c;计算表格中列的合计或平均值等。该函数应该返回一个对象&#xff0c;其中包含每个列的合计值。例如&#xff0c;如果您的表格数据是这样的&#xff1a; [{ name: John, age: 20, …...

编程日记 2023/12/1 8:43:40

计网Lesson1笔记

文章目录 几个简单概念计网的发展史阿帕网和RFCTCP/IP 协议互联网协议计网设计OSI 的七层架构TCP/IP 协议簇 几个简单概念 主机(host)&#xff1a;指单个计算机&#xff0c;比如PC&#xff0c;或者其他电子设备。端系统(end system)&#xff1a;指一块区域内的多个主机&#x…...

编程日记 2023/12/1 8:41:34

指针数组以及利用函数指针来实现简易计算器及typedef关键字（指针终篇）

文章目录 &#x1f680;前言&#x1f680;两段有趣的代码✈️typedef关键字 &#x1f680;指针数组&#x1f680;简易计算器的实现 &#x1f680;前言 基于阿辉前两篇博客指针的基础篇和进阶篇对于指针的了解&#xff0c;那么今天阿辉将为大家介绍C语言的指针剩下的部分&#…...

编程日记 2023/12/1 8:40:33

josef JZ-7Y-33静态中间继电器 电压DC220V 板前接线

系列型号&#xff1a; JZ-7Y-201X静态中间继电器&#xff1b;JZ-7J-201X静态中间继电器&#xff1b; JZ-7L-201X静态中间继电器&#xff1b;JZ-7D-201X静态中间继电器&#xff1b; JZ-7Y-201静态中间继电器&#xff1b;JZ-7J-201静态中间继电器&#xff1b; JZ-7L-201静态中…...

编程日记 2023/12/1 8:39:32

Java第二十章 ——多线程

本文主要讲了java中多线程的使用方法、线程同步、线程数据传递、线程状态及相应的一些线程函数用法、概述等。 在这之前&#xff0c;首先让我们来了解下在操作系统中进程和线程的区别&#xff1a; 　　进程&#xff1a;每个进程都有独立的代码和数据空间&#xff08;进程上下文…...

编程日记 2023/12/1 8:38:31

【超强笔记软件】Obsidian实现免费无限流量无套路云同步

【超强笔记软件】Obsidian如何实现免费无限流量无套路云同步&#xff1f; 目录 一、简介 软件特色演示&#xff1a; 二、使用免费群晖虚拟机搭建群晖Synology Drive服务&#xff0c;实现局域网同步 1 安装并设置Synology Drive套件 2 局域网内同步文件测试 三、内网穿透群…...

编程日记 2023/12/1 8:36:28

【Linux小项目】实现自己的bash

0. bash原理介绍 bash实际上就是一个负责解析输入字符串工具. 我们需要做的事是这些: 手动分割出输入的字符串判断哪些变量是内建命令(自己执行),哪些命令是普通命令(创建子进程执行)实现的功能有: echo export cd 常规指令 输入、输出流重定向 #include<stdio.h> #i…...

编程日记 2023/12/1 8:32:21

客户案例：EDLP助力金融行业打造高效数据防泄露体系

客户背景 某金融机构是一家以金融科技为核心&#xff0c;致力于为客户提供全方位、智能化、便捷化金融服务的综合性企业。公司总部位于南京&#xff0c;业务范围覆盖全国&#xff0c;拥有强大的技术研发团队和优秀的业务精英&#xff0c;为客户提供全方位的金融服务解决方案。 …...

编程日记 2023/12/1 8:30:18

【JavaFX漏扫开发基础】stage窗口/模式/模态

文章目录 stage一、stage窗口二、stage窗口，模式，模态stage模式（5种样式）模态化窗口stage stage其实就是一个窗口，它啥也不是，打开所有windows的程序都会有一个窗口，这个窗口就是javafx里的stage。里面的内容不属于stage，stage就是一个窗口，就这么简单。 Stage is a…...

编程日记 2023/12/1 8:29:17

夜间自动化！OpenClaw调度Qwen3-4B完成凌晨数据备份

夜间自动化&#xff01;OpenClaw调度Qwen3-4B完成凌晨数据备份 1. 为什么需要夜间自动化备份 凌晨三点&#xff0c;我的手机突然弹出服务器告警——又一次因为手动备份遗漏导致磁盘空间不足。作为个人开发者&#xff0c;我意识到需要一套能利用闲置计算资源的自动化方案。传统…...

编程新知 2026/4/2 23:39:26

告别Python依赖！用这个纯TypeScript的stock-sdk，在浏览器和Node里轻松搞定A股港股美股行情

纯TypeScript金融数据解决方案&#xff1a;stock-sdk全场景开发指南 金融数据获取一直是前端和Node.js开发者面临的痛点。传统方案往往依赖Python生态&#xff0c;导致技术栈割裂、项目臃肿。而纯TypeScript实现的stock-sdk&#xff0c;以其零依赖、双端运行的特点&#xff0c;…...

编程新知 2026/4/2 22:23:59

泛微Ecology数据库小白必看：三张表搞定待办、已办、办结查询（附完整SQL及字段解释）

泛微Ecology流程查询实战指南&#xff1a;从表结构到SQL优化的完整解析 引言 在日常办公自动化管理中&#xff0c;泛微Ecology系统作为国内主流的工作流平台&#xff0c;承载着企业大量业务流程的运转。但对于刚接触系统管理的技术人员来说&#xff0c;面对复杂的数据库表结构和…...

编程新知 2026/4/2 22:19:58

Matlab vs Python：灰色关联分析(GRA)可视化效果大比拼

Matlab vs Python&#xff1a;灰色关联分析可视化效果与实现深度对比 在数据科学领域&#xff0c;灰色关联分析(Grey Relational Analysis, GRA)作为一种强大的小样本数据分析工具&#xff0c;正逐渐受到研究者和实践者的青睐。面对两种主流编程语言Matlab和Python&#xff0c;…...

编程新知 2026/4/2 22:19:57

Mapbox GL JS 新手必看：GeoJSON 数据坐标填错，地图显示全乱套？

Mapbox GL JS 开发避坑指南&#xff1a;GeoJSON 坐标系问题全解析 刚接触 Mapbox GL JS 的开发者经常会遇到一个令人抓狂的问题&#xff1a;明明按照文档写了代码&#xff0c;GeoJSON 数据也加载成功了&#xff0c;但地图上的点线面全都显示在错误的位置&#xff0c;有的甚至跑…...

编程新知 2026/4/2 22:15:55

终极TensorFlow Rust数学运算指南：从基础算术到复杂函数完全掌握

终极TensorFlow Rust数学运算指南&#xff1a;从基础算术到复杂函数完全掌握 【免费下载链接】rust Rust language bindings for TensorFlow 项目地址: https://gitcode.com/gh_mirrors/rust/rust TensorFlow Rust为开发者提供了强大的数学运算能力&#xff0c;通过Rust…...

编程新知 2026/4/2 21:41:08

Pixel Aurora Engine作品集：基于大气/明亮/交互哲学的100+原创像素图

Pixel Aurora Engine作品集&#xff1a;基于大气/明亮/交互哲学的100原创像素图 1. 像素极光引擎概览 Pixel Aurora Engine是一款专为像素艺术创作设计的AI绘图工作站。它采用复古游戏机风格的界面设计&#xff0c;将现代AI技术与经典8-bit美学完美融合。通过简单的文字描述&…...

编程新知 2026/4/2 20:56:23

Phi-4-mini-reasoning效果验证：在MMLU-Pro数学子集上的实际推理准确率展示

Phi-4-mini-reasoning效果验证&#xff1a;在MMLU-Pro数学子集上的实际推理准确率展示 1. 模型概述 Phi-4-mini-reasoning是一款3.8B参数的轻量级开源模型&#xff0c;由微软Azure AI Foundry团队开发。这款模型专为数学推理、逻辑推导和多步解题等强逻辑任务设计&#xff0c…...

编程新知 2026/4/2 20:44:17

深入探索Verilog-mode的AUTO功能：提升Verilog/SystemVerilog编码效率

1. Verilog-mode与AUTO功能初探 如果你经常用Verilog或SystemVerilog做数字设计&#xff0c;肯定遇到过这些烦恼&#xff1a;手动实例化模块时要反复核对端口列表、修改信号名后得同步更新十几处连线、敏感信号列表漏写导致仿真异常...这些问题在大型项目中尤为明显。而Emacs的…...

编程新知 2026/4/2 19:15:14

3分钟掌握：如何在Windows上直接安装Android应用的终极方案

3分钟掌握&#xff1a;如何在Windows上直接安装Android应用的终极方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经遇到过这样的情况&#xff1a;手机上有…...

编程新知 2026/4/2 16:46:30