JavaScript技巧之如何实现鼠标跟随文字.pdf
59 浏览量
2024-01-02
11:00:59
上传
评论
收藏 72KB PDF 举报
ＪａｖａＳｃｒｉ ｐｔ技巧之
三三亏善 如何实现■标■■文字
ｌ Ｐ≥ｃ『３、０１２
在 网上 冲 浪 的时 候 发 现 别 人 的 网页 有一 个 小 技 ｆｌａｇ １ ｌ ｌ
巧：如 果你 在他 的网 页上 点 击 一下 ，就 会 出现 一 行文
字跟 随 你 的 鼠标 四处 游 荡 。尽管实现这 个 技巧 不 是根
困难 ，但 是如 果不 知 道 的 话 ，也颇 费你 一番 功 夫呢 。
下 面就 让我 来 简 单介 绍 一 下 它是 怎么 样 实现 的 吧 。
一
．
实现 曩 理 ·
１．定义 显 示 的文 字 ，通 过 捕 获 Ｍｏｕｓｅｍｏｖｅ事件
得 到 鼠 标 的 当 前 位 置 ：
２．把 要 显 示 的文 字 做 为 一 个 层 ”附 加 到 原文
档 上 ， 从 而 形 成 文 字 的 平 滑 移 动 。
＝ ．具体 代码 如 下 ；
Ｌ把 如 下代 码 加 入＜ｈｅａｄ＞区域 中
＜ＳＴＹＬＥ＞．ｓｐａｎｓｔｙｌｅ １
Ｃ０Ｌ０Ｉｌ：ｂｌａｃｋ：ＦＯＮｒ－ＦＡ）（ＩＬＹ：宋体 ：Ｆ０ＮＴ＿ＳＩ皿
９ｐｔ：Ｆ０Ｍ ｌ盹 ＩＧＨＴ：ｂｏｌｄ：ＰＯＳＩＴＩＯＮ：ａｂｓｏｌｕｔｅ：僻
一
５０ｐｘ： ＶＩＳＩＢＩＬＩＴＹ： ｖｉｓｉｈ］ｅ
）
＜／ＳＴＹＬＥ＞
＜ＳＣＲＩＰＴ＞
ｖａｒ ｘｔ ｙ
ｖａｒ ｓｔｅｐ＝２０
ｖａｒ ｆｌａｇ＝０
ｖａｒ ｍｅｓｓａｇｅ＝ ★欢迎 你 的光 临 ！
ｍｅｓｓａｇ ｅ－ｌ ｅｓｓａｇ ｅ．ｓｐｌｉｔ（～）
ｖａｒ ｘｐｏｓ＝ｎｅｗ Ａｒｒａｙ（ ）
ｆｏｒ （ｉ＝０：ｉ＜－－ｍｅｓｓａｇｅ．１ｅｎｇｔｈ－１：ｉ＋十） ｛
ｘｐｏｓ［ｉ］一 ５０ ｝
ｖａｒ ｙｐｏｓ＝ｅｅｗ Ａｒｒａｙ（）
ｆｏｒ （ｉ＝Ｏ：ｉ＜－－ｍｅｓｓａｇ ｅ．１ｅｎｇｔｈ－１：ｉ＋＋） ｛
ｙｐｏｓ［ｉ］一 ５０ ｝
ｆｕｎｃｔｉｏｎ ｈａｎｄｌｅｒｌ￣ｌ（ｅ）｛
ｘ ＝ （ｄｏｃｕｍｅｎｔ．１ａｙｅｒｓ） ？ ｅ．ｐａｇｅＸ ：ｄｏｃｕｍｅｎｔ．
ｂｏｄｙ．ｓｃｒｏｌｌＬｅｆｔ＋ｅｖｅｎｔ．ｃｌｉｅｎｔＸ
Ｙ＝ （ｄｏｃｕｍｅｎｔ，ｌａｙｅｒｓ） ？ ｅ．ｐａｇ ｅＹ ：ｄｏｃｕｍｅｎｔ．
ｂｏｄｙ．ｓｃｒｏｌＩＴｏｐ＋ｅｖｅｎｔ．ｃｉｉｅｎｔＹ
ｆｕｎｃｔｉｏｎ ｍａｋｅｓｎａｋｅ（） ｛
ｉｆ （ｆｌａｇ＝＝ｌ矗＆ ｄｏｃ ｕｍｅｎｔ．ａｌ１） ｛
ｆｏｒ （ｉ￣ ｅｓｓａｇｅ．］ｅｎｇｔｈ－１：ｉ＞＝ｌ：ｉ一 ） ｛
ｘｐｏｓ［ｉ］＝ｘｐｏｓ［ｉ—１］＋ｓｔｅｐ
ｙｐｏｓ［ｉ］＝ｙｐｏｓ［ｉ—Ｌ］ ）
ｘｐｏｓ［０］＝ｘ＋ｓｔｅｐ
ｙｐｏｓ［０］＝ｙ
ｆｏｒ （ｉ＝０：ｉ＜ｍｅｓｓａｇｅ．１ｅｎｇｔｈ一１：ｉ＋．） ｛
ｖａｒ ｔｈｌｓｓｐａｎ ： ｅｖａ］（ ｓｐａｎ ＋（ｉ）＋ ．ｓｔｙｌｅ ）
ｔｈｉｓｓＩｍｎ．ｐｏｓＬｅｆｔ＝ｘｐｏｓ［ｉ］
ｔｈｉｓｓｐａｎ．ｐｏｓＴｏｐ＝ｙｐｏｓ［ｉ］
ｅｌｓｅ ｉ＇ｆ （ｆ］ａｇ＝ ｌ＆＆ ｄｏｃｕｍｅｎｔ．１ａｙｅｒｓ） ｛
ｆｏｒ （ｉ￣ ｅｓｓａｇｅ ｌｅｎｇｔｈ一１：ｉ＞＝ｌ：ｉ一 ） ｛
ｘｐｏｓ［ｉ］＝ｘｐｏｓ［ｉ＿１］＋ｓｔｅｐ
ｙｐｏｓ［ｉ］＝ｙｐｏｓ［卜 １］
ｘｐｏｓ［０］＝ｘ＋ｓｔｅｐ
ｙｐｏｓ［０］＝ｙ
ｆｏｒ （ｉ＝０：ｉ＜ｍｅｓｓａｇｅ．１ｅｎｇｔｈ－１：ｉ＋＋） ｛
ｖａｔ ｔｈｉｓｓｐａｎ ＝ ｅｖａ］（ ｄｏｃｕｍｅｎｔ．ｓｐａｎ ＋ｉ）
ｔｈｉｓｓｐａｎ．１ｅｆｔ＝ｘｐｏｓ［ｉ］
ｔｈｉｓｓｐａｎ．ｔＯｐ＝ｙｐｏｓ［ｉ］
ｖａｒ ｔｉｍｅｒ＝ｓｅｔＴｉｍｅｏｕｔ（ ｍａｋｅｓｎａｋｅ（） ．３０）
）
＜／ＳＣＲＩＰＴ＞
２．把如 下 代码 加 入＜ｂｏｄｙ＞区域 中
＜ＳＣＲＩＩ Ｔ＞
＜Ｌ－－ Ｂｅｇｉｎｎｉｎｇ ｏｆ ＪａｖａＳｃｒｉｐｔ —
ｆｏｒ （ｉ＝０：ｉ＜－－ｍｅｓｓａｇ ｅ．１ｅｎｇｔｈ一１： ｉ＋＋） ｛
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ ＜ｓｐａｎ ｉ ｄ＝ ｓｐａｎ ＋ｉ＋
ｃｌａｓｓ＝ ｓｐｎｎ ｓｔｙ］ｅ’＞ ）
ｄ ｕｍ ｅｎｔ．￣ｒＪｔｅ（ｍｅｓｓａｇｅ［ｉ］）
（下转 第 ５４页 ）
维普资讯 http://www.cqvip.com
资源评论
徐浪老师
- 粉丝: 6358
- 资源: 6880
最新资源
- Pytorch框架基于Bert构建词向量+Bi-LSTM+Attention实现情感分类任务python源码+数据集.zip
- ####这是一篇对软件测试实验报告详细介绍（含代码）
- 这是一篇关于白盒测试的详细描述文章.docx
- ###这是一篇描述vector的教程文章
- 基于RISC-V的一个简单的五级流水线CPU设计源码+项目说明.zip
- 抽取地下水对加州约塞米蒂国家公园山地湿地复合体可持续性的影响
- C++vector介绍及详细使用示例（源代码）
- java基于GUI的简单记事本
- 指纹识别-基于OpenCV实现的指纹识别算法-附项目源码.zip
- 206693250008_R01C02_Grn.idat
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
