8-9.htm

来自「JScript网页特效,包含很多的实现网页特效的方法.」· HTM 代码 · 共 94 行

HTM

94 行

<html>
<head>
<title>§8.9 跟随鼠标移动的文字</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.spanstyle {color: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y                                //用于记录鼠标所在位置的x,y坐标
var step=16                            //设置每个字之前的距离,以象素为单位
var flag=0                             //鼠标是否移动的标志位
var message="★JavaScript特效100例★!"  //定义跟随鼠标的文字
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 getxy(e)       //得到鼠标所在的x,y坐标
{
  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>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload="makesnake()">
<script>

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

</script>
</body>
</html>

8-9.htm - 源码说明

本页面展示了「JScript网页特效,包含很多的实现网页特效的方法.」中的 8-9.htm 源码文件，采用 HTM 编程语言编写，共 94 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与JScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?