鼠标跟随 html,鼠标跟随效果.html

最新推荐文章于 2024-04-26 06:37:48 发布
最新推荐文章于 2024-04-26 06:37:48 发布
阅读量324 收藏
点赞数
文章标签： 鼠标跟随 html
鼠标跟随效果

.mouse-container{

background: #000;

width: 800px;

margin:20px auto;

}

table > tr > td {

color:transparent;

width: 40px;

height: 40px;

border: 1px solid #000;

}

.border{

border: 1px solid #fff;

background: #333;

}

.border-gray-top{

border: 1px solid #aaa;

border-top: 1px solid #000;

background: #222;

}

.border-gray-bottom{

border: 1px solid #aaa;

border-bottom: 1px solid #000;

background: #222;

}

.border-gray-left{

border: 1px solid #aaa;

border-left: 1px solid #000;

background: #222;

}

.border-gray-right{

border: 1px solid #aaa;

border-right: 1px solid #000;

background: #222;

}

.border-top-left{

border-top: 1px solid #666;

border-left: 1px solid #666;

}

.border-top-right{

border-top: 1px solid #666;

border-right: 1px solid #666;

}

.border-bottom-left{

border-bottom: 1px solid #666;

border-left: 1px solid #666;

}

.border-bottom-right{

border-bottom: 1px solid #666;

border-right: 1px solid #666;

}

const container = document.getElementsByClassName("mouse-container")[0];

const table = document.createElement("table");

for (let i = 0; i < 20; i++) {

const tr = document.createElement("tr");

for (let j = 0; j < 20; j++) {

const td = document.createElement("td");

td.classList.add(`${i}-${j}`);

td.innerHTML = `${i}-${j}`;

tr.appendChild(td);

td.addEventListener("mouseleave",(e)=>{

if(e.target.nodeName.toLowerCase()==="td"){

e.target.classList.remove("border");

const [xAxis,yAxis] = e.target.innerHTML.split("-");

if(xAxis-1>=0){

const topTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis}`)[0];

topTarget.classList.remove("border-gray-top");

}

if(xAxis*1<19){

const bottomTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis}`)[0];

bottomTarget.classList.remove("border-gray-bottom");

}

if(yAxis-1>=0){

const leftTarget = document.getElementsByClassName(`${xAxis}-${yAxis-1}`)[0];

leftTarget.classList.remove("border-gray-left");

}

if(yAxis*1<19){

const rightTarget = document.getElementsByClassName(`${xAxis}-${yAxis*1+1}`)[0];

rightTarget.classList.remove("border-gray-right");

}

if(xAxis-1>=0 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis-1}`)[0];

topLeftTarget.classList.remove("border-bottom-right");

}

if(xAxis*1<19 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis-1}`)[0];

topLeftTarget.classList.remove("border-top-right");

}

if(xAxis-1>=0 && yAxis*1<19){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis*1+1}`)[0];

topLeftTarget.classList.remove("border-bottom-left");

}

if(xAxis*1<19 && yAxis*1<19){

const bottomRightTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis*1+1}`)[0];

bottomRightTarget.classList.remove("border-top-left");

}

}

})

}

table.appendChild(tr);

}

container.appendChild(table);

table.addEventListener("mousemove",(e)=>{

if(e.target.nodeName.toLowerCase()==="td"){

e.target.classList.add("border");

const [xAxis,yAxis] = e.target.innerHTML.split("-");

if(xAxis-1>=0){

const topTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis}`)[0];

topTarget.classList.add("border-gray-top");

}

if(xAxis*1<19){

const bottomTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis}`)[0];

bottomTarget.classList.add("border-gray-bottom");

}

if(yAxis-1>=0){

const leftTarget = document.getElementsByClassName(`${xAxis}-${yAxis-1}`)[0];

leftTarget.classList.add("border-gray-left");

}

if(yAxis*1<19){

const rightTarget = document.getElementsByClassName(`${xAxis}-${yAxis*1+1}`)[0];

rightTarget.classList.add("border-gray-right");

}

if(xAxis-1>=0 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis-1}`)[0];

topLeftTarget.classList.add("border-bottom-right");

}

if(xAxis*1<19 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis-1}`)[0];

topLeftTarget.classList.add("border-top-right");

}

if(xAxis-1>=0 && yAxis*1<19){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis*1+1}`)[0];

topLeftTarget.classList.add("border-bottom-left");

}

if(xAxis*1<19 && yAxis*1<19){

const bottomRightTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis*1+1}`)[0];

bottomRightTarget.classList.add("border-top-left");

}

}

});

// container.innerHTML = "看看我在哪儿"

一键复制

编辑

Web IDE

原始数据

按行查看

历史

珍妮之吻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标跟随小游戏
qq_46291038的博客
08-10 476
在创建项目的时候，记得要引入jquery.min.js 的库，也可以引入别的版本的jquery库 在Script里的代码： <script type="text/javascript"> $(document).ready(function() { var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); var c = $("#c"); v.
html 鼠标跟随
qq_45627570的博客
09-23 274
<style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 开启box1的绝对定位 */ position: absolute; } </style> <script type="te...
Html跟随鼠标闪电效果
04-09
在网上找到的，我作为一个大自然的搬运工而已
鼠标跟随效果的实现
车联网开发的博客
08-12 917
本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单 代码如下 &lt;!DOCTYPE html&gt; &lt;!--create by ydj on 2018-08-12--&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
html--鼠标跟随特效
最新发布
stqer的博客
04-26 1225
【代码】html--鼠标跟随特效。
鼠标跟随特效
m0_52128556的博客
07-27 1937
鼠标跟随 鼠标跟随效果，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动 代码 <style> body{ height:5000px; } div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;} </style> js 代码 <script> window.onload = function(){
事件高级 （黑马课程总结【侵删】）
qq_42024229的博客
10-08 186
注册事件（绑定事件） 删除事件（解绑事件） DOM事件流 事件对象 阻止事件冒泡 事件委托（代理、委派） 常用的鼠标事件 常用的键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
html实现鼠标跟随,js实现鼠标跟随运动效果
weixin_42377790的博客
06-04 969
鼠标跟随运动效果展示1、使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span2、给span标签添加字段3、设置基本的样式1、cursorPlay的宽度 992px，高度600px2、cursorPlay li背景为白色，内边距为8px，外边距5px,显示浮动为左浮动3、cursorPlay li a,cursorPl...
HTML跟随鼠标特效.rar
06-29
HTML跟随鼠标特效是一种常见的前端交互设计，通过JavaScript、HTML和CSS技术实现，为网页增加动态视觉效果。这种特效使得页面元素能够根据用户的鼠标移动轨迹进行动态显示，为用户带来更丰富的交互体验。以下是对这...
鼠标跟随特效超帅.html
04-08
纯html，鼠标跟随特效，很帅很炫酷。
HTML5层叠图片跟随鼠标移动特效
07-24
在本案例中，“HTML5层叠图片跟随鼠标移动特效”是一个利用HTML5特性实现的互动视觉效果。这个特效使得图片能够根据用户的鼠标移动而动态改变，呈现出一种层叠式的放大、缩小和隐藏的动画效果。 首先，让我们来了解...
图片的鼠标跟随效果过程.rar
06-18
本示例"图片的鼠标跟随效果过程"通过JavaScript的DOM操作和CSS技术，实现了一个有趣的交互功能：无论用户将鼠标移动到页面的何处，图片都会始终保持在鼠标的正下方，营造出一种跟随鼠标移动的视觉效果。这种效果尤其...
鼠标右键跟随弹框选项html例子
07-13
本文将深入探讨如何使用HTML实现一个跟随鼠标右键点击出现的弹框选项，同时也会提及到`layui`框架在这个过程中的应用。 首先，让我们了解HTML的基本结构。HTML（超文本标记语言）是构建网页的基础，它定义了页面的...
鼠标跟随效果
weixin_34102807的博客
04-28 63
2019独角兽企业重金招聘Python工程师标准>>> ...
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 944
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html跟随鼠标事件,HTML5深入学习之鼠标跟随，拖拽事件
weixin_29304021的博客
06-07 705
知识点(鼠标跟随)：mousedown: 当用户用鼠标点击在某一元素上就会触发该事件mouseover: 当鼠标指针在某一元素上移动就会触发改事件下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动独秀不爱秀* {padding: 0;margin: 0;}#one {width: 100px;height: 100px;background-color: red;position: abso...
html实现鼠标跟随,html5实现鼠标跟随
weixin_28737073的博客
06-04 1020
html5实现鼠标跟随 (3页) 本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！19.90 积分Html5 实现鼠标跟随，纯 js 代码，没有 flash 或者图片之类的，chrome 浏览器，firefix 或 者 ie9 以上支持。代码很容易看懂 效果图：源代码：var data = 0; window.onload = function() { C ...
HTML实例——鼠标跟随
liuzuoping的博客
12-26 3206
Event举例 1：鼠标跟随 代码实现： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height: 500...
html鼠标跟随特效代码
05-19
以下是一段简单的HTML和CSS代码，可以实现鼠标跟随特效： HTML代码： ``` <div class="box"> <h1>鼠标跟随特效</h1> </div> ``` CSS代码： ``` .box { position: relative; display: inline-block; } .box h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .box:hover h1 { color: red; } .box:hover:before { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 50%; background-color: red; transform: translate(-50%, -50%); z-index: -1; } ``` 这段代码的实现原理是，在鼠标移动到盒子上方时，使用:hover伪类来改变标题的颜色，并在盒子内部创建一个伪元素:before，模拟一个红色圆点跟随鼠标移动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值