css3鼠标跟随代码,鼠标经过的css代码

http://www.itjxue.com  2023-01-13 15:10  来源:未知  点击次数: 

如何用代码实现鼠标跟踪?

你添加个鼠标侦听事件就行了,不停得改变鼠标的坐标就行了。网上的鼠标侦听事件代码很多的,我以前也是自学这个的

我有一个css3的代码,其显示效果是当打开网页时就开始现实动画,但是我想改成鼠标经过动画,当怎么做?

#animation:hover{

????-webkit-animation:wobble?1s?.2s?ease?both;

????-moz-animation:wobble?1s?.2s?ease?both;

}

制作网页时如何让鼠标后面跟着一行字,一直跟着鼠标,滚动鼠标滚轮的时候也一直跟着,加了很多代码试了,科

估计是浏览器不兼容

下面这个我亲测可以的哦

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=0;imessage.length;i++) {

xpos[i]=-50;

}

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

for (i=0;imessage.length;i++) {

ypos[i]=-50;

}

for (i=0;imessage.length;i++) { //动态生成显示每个字符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-1; i=1; i--) {

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

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

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

}

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

ypos[0]=y

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

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

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

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

thisspan.posLeft=xpos[i];

thisspan.posTop=ypos[i];

}

}

else{

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

怎样实现随着鼠标滚动到某个位置触发对应css3特效

有入就要有出,就如onmouseover和onmouseout,入的时候改变,出的时候要有还原。。。(或者是在入的改变之前做还原- -。。。)

希望能帮到你,如果还有疑问,可以继续追问;如果满意,请记得采纳哦~~~

css箭头跟随鼠标的代码

.asd {

cursor: pointer;

}

css代码里加这么一条就行了把pointer改成别的就可以让鼠标变成别的样子,也可以输入图片的定位符变成指定的形状!

急求鼠标后跟随文字的几个网页特效代码

你随便弄个网页

以下代码插入head标签之内,保存预览,就可以看到很漂亮的文字环绕鼠标:

SCRIPT

LANGUAGE="JavaScript"

if

(document.all)

{

yourLogo

=

"我想有个家一个温暖的家";

//自己根据要求设置//

logoFont

=

"宋体";

logoColor

=

"#00ccff";

yourLogo

=

yourLogo.split('');

L

=

yourLogo.length;

TrigSplit

=

360

/

L;

Sz

=

new

Array()

logoWidth

=

100;

logoHeight

=

-30;

ypos

=

0;

xpos

=

0;

step

=

0.03;

currStep

=

0;

document.write('div

id="outer"

style="position:absolute;top:0px;left:0px"div

style="position:relative"');

for

(i

=

0;

i

L;

i++)

{

document.write('div

id="ie"

style="position:absolute;top:0px;left:0px;'

+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'

+'color:'+logoColor+';text-align:left"'+yourLogo[i]+'/div');

}

document.write('/div/div');

function

Mouse()

{

ypos

=

event.y;

xpos

=

event.x

-

5;

}

document.onmousemove=Mouse;

function

animateLogo()

{

outer.style.pixelTop

=

document.body.scrollTop;

for

(i

=

0;

i

L;

i++)

{

ie[i].style.top

=

ypos

+

logoHeight

*

Math.sin(currStep

+

i

*

TrigSplit

*

Math.PI

/

180);

ie[i].style.left

=

xpos

+

logoWidth

*

Math.cos(currStep

+

i

*

TrigSplit

*

Math.PI

/

180);

Sz[i]

=

ie[i].style.pixelTop

-

ypos;

if

(Sz[i]

5)

Sz[i]

=

5;

ie[i].style.fontSize

=

Sz[i]

/

1.7;

}

currStep

-=

step;

setTimeout('animateLogo()',

20);

}

window.onload

=

animateLogo;

}

/script

(责任编辑:IT教学网)

更多

推荐微信营销文章