js实现文字跟随鼠标移动而移动的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现文字跟随鼠标移动而移动的方法。分享给大家供大家参考。具体分析如下:

这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动

<html>

<head>

<style type="text/css">

.spanstyle {

COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible

}

</style>

<script>

var x,y

var step=18 //这里是相邻两个字之间的间隔

var flag=0

var message="三水点靠木 3water.com 欢迎你的光临!" //这里放需要显示的文字

message=message.split("") //将字符串分解为数组

var xpos=new Array() //创建数组,以记录每个位置的x坐标

for (i=0;i<=message.length-1;i++) { //给每个元素先赋一个初始值

xpos[i]=-50

}

var ypos=new Array() //创建数组,以记录每个位置的y坐标

for (i=0;i<=message.length-1;i++) {

ypos[i]=-200

}

function movehandler(e){ //处理鼠标移动事件

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX //根据浏览器的不同,记录鼠标的水平位置

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY //记录鼠标的垂直位置

flag=1 //鼠标位置已经改变,需要重新计算

}

function makesnake() {

if (flag==1 && document.all) { //如果是IE

for (i=message.length-1; i>=1; i--) { //处理坐标队列

xpos[i]=xpos[i-1]+step //将每一座标数据前移一格,并加上字符间距

ypos[i]=ypos[i-1]

}

xpos[0]=x+step //将新数据写进坐标数据队列尾部

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("span"+(i)+".style")// 生成当前操作对象spanx.style

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else if (flag==1 && document.layers) { //如果是NS

for (i=message.length-1; i>=1; i--) { //处理坐标队列

xpos[i]=xpos[i-1]+step //将每一座标数据前移一格,并加上字符间距

ypos[i]=ypos[i-1]

}

xpos[0]=x+step //将新数据写进坐标数据队列尾部

ypos[0]=y

for (i=0; i<message.length-1; i++) { //根据数组的数据改变每一个字所在的层的坐标

var thisspan = eval("document.span"+i) //生成当前操作对象document.spanx

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("makesnake()",30) //30毫秒后再次根据情况调整各字符位置

}

</script>

</head>

<body bgcolor="ffffff" onload="makesnake()">

<script>

<!-- Beginning of JavaScript -

//这里为每个字生成一个span作为容器

for (i=0;i<=message.length-1;i++) {

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")

}

//规定鼠标移动事件的处理过程

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = movehandler;

// - End of JavaScript - -->

</script>

</body>

<br><b>这种效果是不是很酷啊?</b></br>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 #Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 #Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 #Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 #Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 #Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 #Javascript
常用的JavaScript模板引擎介绍
Feb 28 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
中英文自我评价语句
2013/12/20 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
庆七一宣传标语
2014/10/08 职场文书
学生检讨书怎么写
2014/10/09 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
MySQL创建管理HASH分区
2022/04/13 MySQL
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers