Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết động với khung
URL: https://www.javascriptbank.com/rollover-animation-for-textlinks.html
Khi rê con trỏ chuột đến, liên kết sẽ tạo một khung bao xung quanh liên kết, đồng thời khung này có kích thước thay đổi từ lớn đến nhỏ và màu mờ dần một cách liên tục. Bạn có thể thay đổi các thông số này đối với mỗi liên kết khác nhau trên trang web.
Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết động với khung
URL: https://www.javascriptbank.com/rollover-animation-for-textlinks.html
<SCRIPT>// Do not edit the code belowvar maxborder_thicknessvar border_thicknessvar i_fadestrengthvar i_fadestrengthstepvar linkpostopvar linkposbottomvar linkposleftvar linkposrightvar linewidthvar lineheightvar animatedlinkvar animatedcolorvar interval=50var plusorminus=1function showlines(animatedlink,animatedbordercolor,maxwidth) { if (document.all) { thislink=animatedlink thisbordercolor=animatedbordercolor maxborder_thickness=maxwidth border_thickness=1 i_fadestrength=100; i_fadestrengthstep=Math.floor(100/maxborder_thickness) animation=true doanimation() }}function doanimation() { if (animation) { if (border_thickness>=maxborder_thickness || border_thickness<1) { plusorminus*=-1 } border_thickness+=plusorminus i_fadestrength=100-(i_fadestrengthstep*border_thickness) border_color=thisbordercolor linkpostop=thislink.offsetTop linkposbottom=linkpostop+thislink.offsetHeight linkposleft=thislink.offsetLeft linkposright=linkposleft+thislink.offsetWidth linewidth=linkposright-linkposleft+(4*border_thickness) lineheight=linkposbottom-linkpostop+(4*border_thickness) document.all.linetopimg.style.posTop=linkpostop-(2*border_thickness) document.all.linetopimg.style.posLeft=linkposleft-(2*border_thickness) document.all.linebottomimg.style.posTop=linkpostop+lineheight-(2*border_thickness) document.all.linebottomimg.style.posLeft=linkposleft-(2*border_thickness) document.all.lineleftimg.style.posTop=linkpostop-(1*border_thickness) document.all.lineleftimg.style.posLeft=linkposleft-(2*border_thickness) document.all.linerightimg.style.posTop=linkpostop-(1*border_thickness) document.all.linerightimg.style.posLeft=linkposleft+linewidth-(3*border_thickness) var linetopimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">" linetopimgcontent+="<img src='emptyimg.gif' width="+linewidth+" height="+border_thickness+">" linetopimgcontent+="</td></tr></table>" var linebottomimgcontent=linetopimgcontent var lineh=lineheight-border_thickness var lineleftimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">" lineleftimgcontent+="<img src='emptyimg.gif' width="+border_thickness+" height="+lineh+">" lineleftimgcontent+="</td></tr></table>" var linerightimgcontent=lineleftimgcontent linetopimg.filters.alpha.opacity=i_fadestrength linebottomimg.filters.alpha.opacity=i_fadestrength lineleftimg.filters.alpha.opacity=i_fadestrength linerightimg.filters.alpha.opacity=i_fadestrength linetopimg.innerHTML=linetopimgcontent linebottomimg.innerHTML=linebottomimgcontent lineleftimg.innerHTML=lineleftimgcontent linerightimg.innerHTML=linerightimgcontent document.all.linetopimg.style.visibility="visible" document.all.linebottomimg.style.visibility="visible" document.all.lineleftimg.style.visibility="visible" document.all.linerightimg.style.visibility="visible" var timer=setTimeout("doanimation()",interval) } else { clearTimeout(timer) }}function hidelines() { if (document.all) { animation=false document.all.linetopimg.style.visibility="hidden" document.all.linebottomimg.style.visibility="hidden" document.all.lineleftimg.style.visibility="hidden" document.all.linerightimg.style.visibility="hidden" }}if (document.all) { document.write("<a span id='linetopimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='linebottomimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='lineleftimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='linerightimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>")}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><a href="http://www.javascriptbank.com" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">Mouse over this to see</a><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->