跟随鼠标的字

该博客介绍了一段JavaScript脚本,用于实现跟随鼠标的文字特效。脚本分为三步,首先在<head>区域添加样式和脚本代码,定义文字样式、变量及函数;接着在<body>区域添加代码输出文字并绑定鼠标移动事件;最后修改<body>标签添加加载事件触发特效。
部署运行你感兴趣的模型镜像

脚本说明:

第一步:把如下代码加入<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()">

 

 

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值