鼠标移动html代码（HTML鼠标移动出现动画）

本篇文章给大家谈谈鼠标移动html代码，以及HTML鼠标移动出现动画对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求HTML鼠标指针代码
• 2、随鼠标移动的文字HTML的代码怎么写
• 3、如何用html使“当鼠标移到某断字上时改变字的大小和颜色”？
• 4、求鼠标移到文字后有提示信息的HTML代码

求HTML鼠标指针代码

鼠标上变化的文字

脚本说明:

把如下代码加入body区域中

SCRIPT language="JavaScript1.2"

!--

var scroller_msg='Hi,网络编程站欢迎你的光临!'

var dismissafter=0

var initialvisible=0

if (document.all)

document.write('marquee id="curscroll" style="position:absolute;width:150px;border:1px solid black;font-size:14px;background-color:white;visibility:hidden"'+scroller_msg+'/marquee')

function followcursor(){

//move cursor function for IE

if (initialvisible==0){

curscroll.style.visibility="visible"

initialvisible=1

}

curscroll.style.left=document.body.scrollLeft+event.clientX+10

curscroll.style.top=document.body.scrollTop+event.clientY+10

}

function dismissmessage(){

curscroll.style.visibility="hidden"

}

if (document.all){

document.onmousemove=followcursor

document.ondblclick=dismissmessage

if (dismissafter!=0)

setTimeout("dismissmessage()",dismissafter*1000)

}

//--

/SCRIPT

================================

鼠标箭头效果

脚本说明:

把如下代码加入body区域中

SCRIPT LANGUAGE="JavaScript"

!-- Begin

var x, y, xold, yold, xdiff, ydiff;

var dir = Array();

dir[0] = "n-resize";

dir[1]="ne-resize";

dir[2]="e-resize";

dir[3]="se-resize";

dir[4] = "s-resize";

dir[5]="sw-resize";

dir[6]="w-resize";

dir[7]="nw-resize";

document.onmousemove = FindXY;

function display(direction) {

document.body.style.cursor = dir[direction];

}

function FindXY(loc) {

x = (document.layers) ? loc.pageX : event.clientX;

y = (document.layers) ? loc.pageY : event.clientY;

xdiff = x - xold;

ydiff = y - yold

if ((xdiff 2) (ydiff -2)) display(0);

if ((xdiff 2) (ydiff 2)) display(4);

if ((xdiff 2) (ydiff 2)) display(2);

if ((xdiff -2) (ydiff 2)) display(6);

if ((xdiff 2) (ydiff 2)) display(3);

if ((xdiff 2) (ydiff -2)) display(1);

if ((xdiff -2) (ydiff 2)) display(5);

if ((xdiff -2) (ydiff -2)) display(7);

xold = x;

yold = y;

}

// End --

/script

随鼠标移动的文字HTML的代码怎么写

用Javascript制作鼠标移动跟随

我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。

程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、动画或文字随鼠移动的目的了。

一、一个简单的图片、动画或文字随鼠标移动的例子

制作方法：

1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。

2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到body标记的后面：

div id="div1" style="position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:"50"img src="image/0050.gif" width="32" height="32"图、文跟鼠标试验/div ，这里的图片和文字可换成你所需要的。

3、在head与/head之间加上这样一段程序：

SCRIPT language="javascript"

!--

var x,y; //声明存放当前鼠标位置坐标的变量

var can=0 //声明能否移动的控制变量

function canmove() { //控制能否移动的函数

x=document.body.scrollLeft+event.clientX; //获取当前鼠标位置的X坐标

y=document.body.scrollTop+event.clientY; //获取当前鼠标位置的Y坐标

can=1;} //设置为可以移动

function move() { //移动图层的函数

if (can) {

div1.style.posLeft=x+20; //设置图层位置的X坐标

div1.style.posTop=y;} // 设置图层位置的Y坐标

setTimeout("move()",30)} //每30毫秒刷新一次图层位置坐标

--

/SCRIPT

只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。

4、当然要使真正的效果出现，还得在body标记中加上触发事件调用程序，使程序动作起来。在body标记中加上代码：onload="move()" onmousemove="canmove()"，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。

二、稍复杂一点的效果

在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：

1、在head与/head之间插入下面这段程序：

SCRIPT language="javascript"

!--

var x,y

var step=20

var can=0

var information="欢迎光临！"; //在这里写入跟随鼠标移动的文字

information=information.split(""); //把字符串拆分成单个的文字

Il=information.length; //获取字符的个数，存放在Il变量中

k=0;

var xpos=new Array() //声明一个数组，存放各图层的X位置坐标

for (i=0;i=Il-1;i++){ //给数组赋初值

xpos[i]=-50}

var ypos=new Array() //声明一个数组，存放各图层的Y位置坐标

for (i=0;i=Il-1;i++){ //给数组赋初值

ypos[i]=-50}

function canmove() {

x=document.body.scrollLeft+event.clientX;

y=document.body.scrollTop+event.clientY;

can=1; k=0;step=20}

function move() {

if (can) {

k++;

if (k20) {step++;}else

if (k40) {step--;}else {k=0;} //计算图层左右移动的偏移量

for (i=Il-1;i=1;i--){ //计算各图层在新位置的X、Y坐标

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

ypos[i]=ypos[i-1]}

xpos[0]=x+step;

ypos[0]=y

for (i=0;iIl-1;i++){ //改变各图层位置的X、Y坐标，使其移到新的位置

var thisdiv=eval("div"+(i)+".style");

thisdiv.posLeft=xpos[i];

thisdiv.posTop=ypos[i]}}

setTimeout("move()",30)} //每30秒刷新一次

--

/SCRIPT

2、在body标记的后面加上这段程序：

script language="Javascript"

!--

for (i=0;i=Il-1;i++){

document.write("div id='div"+i+"' style='position:absolute;top:-50px; font-size: 9pt;font-weight: 800; color: #0000FF'"+information[i]+"/div");

}

--

/script

这段程序的作用是动态自动编写存放移动文字图层的HTML代码，并把相应的文字写在上面。

3、在body标记中加上代码：onload="move()" onmousemove="canmove()"。

这样在浏览器中，“欢迎光临！”这几个字就会紧跟鼠标移动，到达新位置后还会左右移动。若是把《三维环绕文字效果制作》一文中的文字移动效果用在本例上，则文字就会绕着鼠标位置旋转。

如何用html使“当鼠标移到某断字上时改变字的大小和颜色”？

首先需要找到这段字所在的标签，(如p标签)

之后设置当鼠标悬浮在该标签上时的样式,在css样式表中声明选择器 标签:hover(如p:hover)

x:hover为伪类样式，hover表示鼠标悬浮在这一标签上时

最后在{}中添加设置字体大小、颜色的代码(如 color:red;)

超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

求鼠标移到文字后有提示信息的HTML代码

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

HTML

HEAD

TITLE网页即时提示演示 /TITLE

!STYLE元素定义顶级元素BODY与行内元素SPAN的样式

STYLE

BODY {cursor:default}

SPAN {background-color:yellow}

/STYLE

/HEAD

BODY

H3Unit 14 Lesson 54/H3

P

!用行内元素SPAN将各个要设置提示的单词单独括起来并用TITLE元素设置提示信息

!本例中要设置提示信息的单词分别为Christmas、festival、Britain

SPAN TITLE="Christmas--n.圣诞节"Christmas /SPAN is an important

SPAN TITLE="festival--n.adj.节日(的);喜庆(的)"festival /SPAN

in SPAN TITLE="Britain--n.英国;不列颠"Britain /SPAN and many other

parts of the world.

/P

/BODY

/HTML

鼠标移动html代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于HTML鼠标移动出现动画、鼠标移动html代码的信息别忘了在本站进行查找喔。