利用JS给html中的背景添加鼠标移动磁铁吸附功能

最新推荐文章于 2021-05-31 10:19:35 发布

原创最新推荐文章于 2021-05-31 10:19:35 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

前端JS、HTML 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JS在HTML中添加背景鼠标移动时的磁铁吸附效果。只需在body标签内插入特定JS代码，即可自定义颜色、透明度、线段数量等参数，实现动态视觉效果。

标题利用JS给html中的背景添加鼠标移动磁铁吸附功能

使用方法很简单只需要再body中间插入这段js代码即可，注意不要放在head里面

配置：颜色：默认是（0，0，0），格式是（R,G,B）

透明度：（0-1），默认0.5

线段的数量：默认0.5

Z轴：默认-1

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Y_R_Q

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML5几何图形碰撞磁力动画特效特效代码

03-20

HTML5几何图形碰撞磁力动画特效是一款基于canvas绘制几何图形悬浮移动碰撞磁场动画特效。

磁铁特效页面_磁吸_磁铁美化_磁铁特效_everude_网页特效_

10-04

磁铁磁吸特效，美化文字，交互性更强，加载不出来请自行修改js文件路径

参与评论您还未登录，请先登录后发表或查看评论

磁性吸附

abcd2144163的博客

11-29

279

html代码： 1 <div id="div1"></div> css代码： 1 #div1{ 2 width:100px; 3 height:100px; 4 background:red; 5 position:absolute; 6 } javascript代码： 1 window.o...

HTML 拾色器

奋斗的日子最甜美，在科技的海洋里，永无止境。

01-02

3338

HTML 拾色器选取颜色: 或输入颜色值: OK 或使用 HTML5: 选择的颜色: 黑色文本阴影白色文本阴影 red #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) hsv(0, 100%, 100%)

js拖拽---磁性吸附

xuehu837769474的博客

08-18

1622

直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽-磁性吸附</title> <style type="text/css"> *{margin:0;padding: 0;} ...

用JavaScript实现鼠标磁铁效果的magnet-mouse动画库

- 该库的核心功能是实现DOM元素跟随鼠标移动的效果，元素的移动行为可以模拟出磁铁吸附的动态效果。 - 这种效果通常用于吸引用户注意力，创建互动和吸引人的界面。 3. 参数调整： - magnet-mouse.js允许开发者...

MagnetJS：基于JavaScript的虚拟冰箱磁铁交互库

- **虚拟磁铁**：视觉表现模仿真实磁铁吸附效果，可能结合 CSS3 动画与 Transform 变换实现平滑移动； - **交互式**：支持鼠标拖拽、触屏手势操作，响应用户的直接操控； - **开源**：代码公开透明，允许任何人查看...

LayaAir游戏开发教程：实现拖拽对象及吸附功能

3. 吸附效果：在拖拽操作中，吸附效果是指当对象被移动到某个区域或边缘时，它会自动“吸附”到该位置，就像是被磁铁吸引一样。为了实现拖拽和吸附功能，通常需要以下步骤： - 监听用户的拖拽事件，如`mousedown`,...

磁铁效果实现页面滑动交互设计

从提供的文件信息来看，该文件可能涉及到网页设计或者移动端应用开发中的一种特殊效果，即“磁铁效果”（Magnetic Effect），它通常与页面的滑动（Scrolling）功能结合起来，以实现一种吸引用户视觉和触感的交互体验...

JavaScript实现仿iPhone图片拖动查看效果

该功能通过纯JavaScript（或结合HTML与CSS）实现，无需依赖大型框架，即可在网页中还原出类似原生移动应用的流畅手势操作效果。从标题“JavaScript仿iPhone手机图片拖动查看器”可以看出，该项目的重点在于“模仿...

JavaScript动画-磁性吸附

weixin_30437847的博客

12-08

283

▓▓▓▓▓▓ 大致介绍　　磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果，如果对模拟拖拽有疑问的同学请移步模拟拖拽。　　源代码、效果：点这里 ▓▓▓▓▓▓ 范围限定（可视区）　　先来看一个在可视区范围内的模拟拖拽，我们先要搞清楚可视区的范围。　　可视区就是用户可以看到的区域，有上、下、左、右四个范围　　上：T = 0 　　下：B = document...

html 磁贴自动布局,使用JS配合CSS实现Windows Phone中的磁贴效果

weixin_35852816的博客

05-31

383

Windows Phone的tile设计的美丽对我来说有余音绕梁的效果。我从来不知道优雅的方块盒子布局能给我深刻的印象。因此我尝试在web里用CSS和Jquery去实现这种tile设计。我已尝试Tile Flip动画效果，它能展示两种不同的信息一个在tile的前端而另外一个就在后端。首先我们要为tile创建和下面图片的效果一样的HTML的内容。每个tile包含了两个分别在前后的div。他们都能包含...

HTML+JavaScript实现鼠标按住拖拽标签功能（代码注释详解）

jojoarare的博客

10-22

1457

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽功能</title> </head> <body> <div></d

JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例

骑着猪猪去拍拖

06-08

5656

JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果 #div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; } #img1 { position:absolute} window.onload = functi

鼠标事件-拖拽3（磁性吸附）

u011927449的博客

07-15

286

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #div2 { width: 150px; height: 150px; position: absolute; background: #CCCCCC; } #div3 { width: 600px; height:

网页实现线条像磁铁一样向鼠标吸附

花果山

04-29

1736

前言：在看其他大佬的博客时，发现一个非常牛x的特效，就是他网页有线条会像磁铁一样吸附到你的鼠标上，当鼠标快速移动的时候又会散开。在网上搜了一下，实现过程也不难，有各种各样的。利用css或者js都可以。我这里采用的是github开源的一个具有JavaScript和Canvas的交互式粒子/嵌套系统，没有jQuery 。链接：https://github.com/hustcc/canvas-n...

漂浮磁力线/鼠标吸铁石特效你也可以实现

weixin_30654419的博客

03-09

569

　　你可能在很多博客中看到类似当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效，鼠标离开的时候线条就自动散开。（ytkah的博客中就能看到）这些特效都是调用 JS 来完成的。你可以轻松实现，代码如下： <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n)...