JS鼠标跟随用什么来解决啊

JavaScript015

JS鼠标跟随用什么来解决啊,第1张

你说的什么,我没看明白。

JS中 window.event 对象可以监听键盘和鼠标的一些动作。可以获取鼠标当前的位置。设置其他对象的坐标就可以实现跟随

如:鼠标X坐标为 window.event.clientX

属性 描述

Abstract 使用 event 对象获取高级流重定向器(ASX)文件中项目横幅的 Abstract 内容。

altKey 设置或获取 Alt 键的状态。

altLeft 设置或获取左 Alt 键的状态。

Banner 使用 event 对象获取高级流重定向器(ASX)文件中项目的 Banner 内容。

button 设置或获取用户所按的鼠标按钮。

cancelBubble 设置或获取当前事件是否要在事件句柄中向上冒泡。

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

contentOverflow 获取表明文档处理当前 LayoutRect 对象后是否包含附加的内容。

ctrlKey 设置或获取 Ctrl 键的状态。

ctrlLeft 设置或获取左 Ctrl 键的状态。

dataFld 设置或获取 oncellchange 事件影响的数据列。

fromElement 设置或获取事件发生时激活或鼠标将要离开的对象。

keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。

MoreInfo 通过 event 对象获取高级流重定向器(ASX)文件中项目横幅的 MoreInfo 内容。

nextPage 获取打印模板中下页的位置。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

propertyName 设置或获取对象上发生更改的属性名称。

qualifier 设置或获取由数据源对象提供的数据成员的名称。

reason 设置或获取数据源对象的数据传输结果。

recordset 从数据源对象设置或获取对默认数据集的引用。

repeat 获取 onkeydown 事件是否正在重复。

returnValue 设置或获取事件的返回值。

saveType 当 oncontentsave 触发时获取剪贴板类型。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

shiftKey 设置或获取 Shift 键的状态。

shiftLeft 设置或获取左 Shift 键的状态。

srcElement 设置或获取触发事件的对象。

srcFilter 设置或获取触发 onfilterchange 事件的滤镜对象。

srcUrn 获取触发事件的行为的统一资源名称(URN)。

toElement 设置或获取用户要将鼠标指针移动指向的对象的引用。

type 从 event 对象中获取事件名称。

wheelDelta 设置或获取滚轮按钮滚动的距离和方向。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

希望对你有帮助

你这段代码需要修改两个地方:

第一,else if (flag==1 &&document.layers) 这里改成else,不要后面的if判断

第二,var thisspan = eval("document.span"+i)改成var thisspan=document.getElementById("span"+i).style

另外,flag的使用其实是多余的,反而会造成困扰,直接把相关代码都删掉。

感觉你这段代码好像很老了,为了适应老的浏览器而烦复了很多。其实应该更简单的。

以下为我亲测可以在FF和IE上运行的代码:

<html>

<head>

<title>文字跟随鼠标</title>

<style type="text/css">

<!--

body{

background-color:#004593

}

.spanstyle{

color:#fff000

font-family:"Courier New"

font-size:18px

font-weight:bold

position:absolute /* 绝对定位 */

top:-50px

}

-->

</style>

<script language="javascript">

var x,y //鼠标当前在页面上的位置

var step=10 //字符显示间距,为了好看,step=0则字符显示没有间距

var message="Cascading Style Sheet" //跟随鼠标要显示的字符串

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

var xpos=new Array() //存储每个字符的x位置的数组

for (i=0i<message.lengthi++) {

xpos[i]=-50

}

var ypos=new Array() //存储每个字符的y位置的数组

for (i=0i<message.lengthi++) {

ypos[i]=-50

}

for (i=0i<message.lengthi++) { //动态生成显示每个字符span标记,

//使用span来标记字符,是为了方便使用CSS,并可以自由的绝对定位

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

document.write(message[i])

document.write("</span>")

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE)

}

function handlerMM(e){ //从事件得到鼠标光标在页面上的位置

e=e||window.event

x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY

}

function makesnake() { //重定位每个字符的位置

if (document.all) { //如果是IE

for (i=message.length-1i>=1i--) {

xpos[i]=xpos[i-1]+step //从尾向头确定字符的位置,每个字符为前一个字符“历史”水平坐标+step间隔,

//这样随着光标移动事件,就能得到一个动态的波浪状的显示效果

ypos[i]=ypos[i-1] //垂直坐标为前一字符的历史“垂直”坐标,后一个字符跟踪前一个字符运动

}

xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标

ypos[0]=y

//上面的算法将保证,如果鼠标光标移动到新位置,则连续调用makenake将会使这些字符一个接一个的移动的新位置

// 该算法显示字符串就有点象人类的游行队伍一样,

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

var thisspan = eval("span"+(i)+".style") //妙用eval根据字符串得到该字符串表示的对象

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else{

for (i=message.length-1i>=1i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

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

var thisspan = document.getElementById("span"+i).style

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。

}

document.onmousemove = handlerMM

</script>

</head>

<body onLoad="makesnake()">

</body>

</html>

你要的应该是拖拽效果,可以通过jq插件做

http://www.runoob.com/jqueryui/example-draggable.html

基本原理就是鼠标按下修改div的left和top(或者right/bottom)。鼠标离开不变。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<Style>

#test{

position:absolute

}

</style>

<script>

$(document).mousedown(function(){

       $(this).mousemove(function(e){

$("#test").css({ "left": e.pageX+"px", "top": e.pageY+"px" }) 

           $(document).mouseup(function(){

               $(this).unbind('mousemove')

           })

       })

   })

</script>

</head>

<body>

<div id="test">ssssssssss</div>

</body>

</html>