鼠标跟踪动画

最新推荐文章于 2022-05-12 16:52:15 发布

旧梦如烟

最新推荐文章于 2022-05-12 16:52:15 发布

阅读量553

点赞数

分类专栏： JS网页特效

本文链接：https://blog.csdn.net/wang263334857/article/details/17150273

版权

这篇博客介绍了一个HTML和JavaScript实现的鼠标跟踪动画，通过动态调整字符的位置，创建出一个类似游行队伍效果的字符串跟随鼠标移动的视觉效果。利用CSS进行样式控制，通过事件监听获取鼠标坐标，实现字符的平滑移动。

摘要由CSDN通过智能技术生成

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>

<STYLE>.spanstyle {
 COLOR: yellow; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}



</STYLE>

<SCRIPT>






var x,y   //鼠标当前在页面上的位置
var step=20  //字符显示间距，为了好看，step=0则字符显示没有间距，视觉效果差
var flag=0

var message="I love you"  //跟随鼠标要显示的字符串
message=message.split("") //将字符串分割为字符数组

var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<=message.length-1;i++

最低0.47元/天解锁文章

旧梦如烟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标跟踪动画

New Page 1.spanstyle { COLOR: yellow; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible}var x,y //鼠标当前在页
复制链接

扫一扫

专栏目录