跟随鼠标的字

原创 2003年03月10日 10:20:00

脚本说明:

第一步:把如下代码加入<head>区域中

<style type="text/css">

.spanstyle {

 COLOR: #ffd8ff; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible

}

</style>

<script>

var x,y

var step=18

var flag=0

// Your snappy message. Important: the space at the end of the sentence!!!

var message="★南京有线宽带网欢迎你的光临!"

message=message.split("")

var xpos=new Array()

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

 xpos[i]=-50

}

 

var ypos=new Array()

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

 ypos[i]=-200

}

 

function handlerMM(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) {

     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")

      thisspan.posLeft=xpos[i]

   thisspan.posTop=ypos[i]

     }

 }

 

 else if (flag==1 && document.layers) {

     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)

      thisspan.left=xpos[i]

   thisspan.top=ypos[i]

     }

 }

  var timer=setTimeout("makesnake()",30)

}

 

</script>

 

 

第二步:把如下代码加入<body>区域中

<script>

<!-- Beginning of JavaScript -

 

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 = handlerMM;

 

// - End of JavaScript - -->

</script>

 

第三步:把<body>改为

<body bgcolor="#fef4d9" onload="makesnake()">

 

 

DIV+js+css跟随鼠标的浮动提示框

转载地址:http://blog.163.com/meng_qiang/blog/static/1773543732011416105516937/
  • qm2010429
  • qm2010429
  • 2014年06月19日 11:24
  • 2714

【jQuery】一个跟随鼠标运动的图层

一、基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图, 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所...
  • yongh701
  • yongh701
  • 2014年12月01日 10:42
  • 960

跟随鼠标的文字

var disWord = "文字"; var dConst = 4; var xConst = 30; var yConst = 0; var sConst = 4.000000E-001; var...
  • yinyiniao
  • yinyiniao
  • 2009年11月04日 21:46
  • 341

跟随鼠标的字符

//跟随鼠标的字符------------------------------------------------------脚本说明:第一步:把如下代码加入区域中.spanstyle { COLOR...
  • zcb888
  • zcb888
  • 2010年05月27日 11:13
  • 251

jquery加CSS3实现导航跟随鼠标移动

经常看到有的网页导航菜单下有个底部边框跟随鼠标移动到的位置而移动仔细想了下,如果只用jquery来实现发现会变得复杂,那么我们知道CSS3里有过度属性transition一.transition属性的...
  • yy211zhu
  • yy211zhu
  • 2016年08月19日 18:05
  • 337

跟随鼠标的时钟

colors = new Array(330099,00ff00,ff00ff);sCol = ff00ff;mCol = 00ff00;hCol = red;H = ***;H = H.split(...
  • yanjiaye520
  • yanjiaye520
  • 2009年09月22日 23:28
  • 311

跟随鼠标的萤火虫

以下是代码,无须修改if (!document.layers&&!document.all)event="test"function showtip2(current,e,text){if ...
  • wjrong
  • wjrong
  • 2004年07月12日 13:43
  • 1129

js实现跟随鼠标移动的提示框

js实现文本框内跟随鼠标移动的提示框,即当鼠标在指定的文本框内时,弹出一个提示,根据鼠标移动显示在鼠标右下角,鼠标离开文本框时提示消失,效果如下: 首先需要定义一个div块,弹出的提示实...
  • zlinhua
  • zlinhua
  • 2012年10月26日 09:18
  • 1507

C#文字随鼠标移动效果

1、WinForm中,左击后鼠标右侧会出现文字,会跟随鼠标一起移动。放开后效果消失。代码如下: private void Form1_MouseMove(object sender, Mouse...
  • Plutus_Lee
  • Plutus_Lee
  • 2012年08月01日 11:56
  • 1441

[脚本]实现游戏对象跟随鼠标方向移动

如何实现游戏对象跟随鼠标方向移动。 效果:当点击鼠标左键时,游戏对象会朝鼠标点击的方向移动(类似魔兽争霸)。 思路:把鼠标的坐标转化成世界坐标(鼠标默认是屏幕坐标),然后当点击鼠标时,物体...
  • ybhjx
  • ybhjx
  • 2015年12月23日 14:13
  • 714
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跟随鼠标的字
举报原因:
原因补充:

(最多只允许输入30个字)