本文目录一览:
- 1、图片中鼠标悬停特效代码怎么写?
- 2、急求鼠标后跟随文字的几个网页特效代码
- 3、鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?
- 4、网页css设置鼠标移动有特效
- 5、怎么给自己的网页改变鼠标图案?
图片中鼠标悬停特效代码怎么写?
图片中鼠标悬停特效代码: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