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   id="70qarhlowxag"   class=ringstyle id=ring><P><FONT color=#ff8080>武林網</FONT></P></DIV><div   id="70qarhlowxag"   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實例：文字描邊效果