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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
详解Vue之事件处理
Jul 10 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP新手上路(九)
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP7 标准库修改
2021/03/09 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
js 函数的副作用分析
2011/08/23 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
python基于ID3思想的决策树
2018/01/03 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android