JavaScript鼠标移上文字放大文字效果

2024-09-05 12:21:36

字体：大中小

来源：转载

供稿：网友

JS实现鼠标移上文字放大文字效果，当把鼠标放在带链接的文字上面时，会由小变大显示出一行文字，逐渐放大到屏幕上然后淡出，此效果用JavaScript来实现，并不复杂，热心朋友可参阅代码。

<html ><head><title>文字由小变大</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><STYLE>.ringstyle {FONT-SIZE: 5pt; VISIBILITY: visible; COLOR: #ff0000; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px;}.explain {FONT-SIZE: 20pt; LEFT: 40px; WIDTH: 300px; COLOR: #000000; FONT-FAMILY: Times; POSITION: absolute; TOP: 80px; TEXT-ALIGN: center;}</STYLE><SCRIPT>var x,yvar timervar i_fontsize=0var step=0var thisx,thisyfunction handlerMM(e){x = (document.layers) ? e.pageX : event.clientXy = (document.layers) ? e.pageY : event.clientY}function ringup() {if (document.all) {thisx = xthisy = yringup2()}}function ringup2() {if (i_fontsize<=1000) { document.all.ring.style.fontSize=i_fontsizedocument.all.ring.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"document.all.ring.style.posLeft=thisx-(Math.floor(i_fontsize/3))document.all.ring.style.posTop=thisy-(Math.floor(i_fontsize/1.4))step+=4i_fontsize+=steptimer=setTimeout("ringup(2)",50)}else { clearTimeout(timer)i_fontsize=0step=0document.all.ring.style.posTop=-10000}}document.onmousemove = handlerMM;</SCRIPT></head><body><DIV class=ringstyle id=ring><P><FONT color=#ff8080>武林网</FONT></P></DIV><DIV class=explain id=redirection style="LEFT: 255px; WIDTH: 358px; TOP: 65px; HEIGHT: 32px"><P><FONT size=2>移动你的鼠标到这里来看看<FONT color=#ff0000>是不是很棒的效果</FONT></FONT></P></DIV></body></html>

上一篇：Js点击展开文字再次点击隐藏（折叠）文字

下一篇：CSS3实例：文字描边效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注