×

网页鼠标特效代码

网页鼠标特效代码(网页鼠标特效代码怎么写)

admin admin 发表于2023-04-10 16:58:09 浏览82 评论0

抢沙发发表评论

本文目录一览:

图片中鼠标悬停特效代码怎么写?

图片中鼠标悬停特效代码:img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"onmouseup="hoverShowDiv()" /。

鼠标悬停的意思是指,当你的鼠标在网页的部分图标、文字或者图片上停留的时候,会有部分内容弹出,档从这个图标、文字或者图片上移开鼠标后,弹出的内容自动缩回。

举例:

鼠标悬停在百度首页()的文字栏,即可有下拉菜单弹出,移开鼠标,即可隐藏,这就是鼠标悬停。

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

你随便弄个网页

以下代码插入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

鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?

代码有bug,修改后如下:

需要注意,拷贝下面这段代码,保存为 html后缀名的文件;需要自己在相同的目录下,放置两张图片,小图片.jpg    大图片.jpg

效果如下图:当鼠标悬停在小图片上面的时候,会显示大图片;鼠标移出,隐藏大图片。

问题:定位需要读者自己去实现一下吧,偷懒了。感谢楼上分享!

!doctype html

html

head

meta charset=utf-8

/head

body

你要显示特效的html  

img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" /-网页鼠标特效代码

div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" 

大图片显示如下

img src="大图片.jpg" width="500px" height="300px" id="bigimg" /

/div

script type="text/javascript"

let divHover = document.getElementById("divHover");

        function hoverShowDiv() {

        console.log("显示大图片");

            divHover.style.display = "block";

            divHover.style.top = document.getElementById("littleimg").style.top + 10;

            divHover.style.left = document.getElementById("littleimg").style.left + 10;

        }

        function hoverHiddendiv() {

        console.log("显示小图片");

            divHover.style.display = "none";

        }

/script

/body

/html

网页css设置鼠标移动有特效

首先我们创建一个html文件,写出html文件的一些基础代码

然后我们在网页中新建一个div,并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件,查看效果,可以看到我们创建的标签自带有一定的格式,

接下来我们使用下面的代码去除标签的格式,其中:list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示,并且为左浮动margin-right:20px;表示设置标签右外边距-网页鼠标特效代码

刷新浏览器中html文件查看效果,

这里我们开始添加动画:

标签添加:

transition:transform 0.1s;

transform表示变换的属性,0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointer;transform:translate(0,-10px);}

cursor:pointer;表示鼠标滑过显示为小手形状

transform:translate(0,-10px);translate表示移动,第一个参数为水平移动值,第二个参数为垂直移动值,

进入浏览器直接查看效果,如下图实现了鼠标滑过块,块上移的动画特效,如下图:

怎么给自己的网页改变鼠标图案?

分类: 电脑/网络 软件 多媒体软件

问题描述:

有追加分20!!!快啊很急啊

解析:

这个网站有介绍,自己看嘛,是专门的网页特效!

helpor/

下面是鼠标代码,把它复制到网站上就OK

style type=text/css

.spanstyle {

COLOR: #00cccc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible-网页鼠标特效代码

}

/style

script

var x,y

var step=18

var flag=0

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 = (documentyers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (documentyers) ? e.pageY : document.body.scrollTop+event.clientY

flag=1

}

function _helpor_() {

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

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else if (flag==1 documentyers) {

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

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

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

}

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

document.write("span id='span"+i+"' class='spanstyle'")

document.write(message[i])

document.write("/span")

}

if (documentyers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

_helpor_();

--

/script