本文介绍了一种使用JavaScript实现的鼠标悬停时文本下划线逐渐显现的效果，通过逐步添加下划线来增强用户体验。文章提供了具体的代码示例。
<script>
var aa, dashLine
var x = 0
var w, h, m
var s = 3
function ani(obj) {
var p = getPosition(obj);
w = obj.offsetWidth;
h = obj.clientHeight;
if (dashLine != null)
dashLine.style.display = "block";
else
dashLine = document.createElement("DIV")
dashLine.style.position = "absolute"
dashLine.style.left = p.x + "px"
dashLine.style.top = (p.y+h) + "px"
dashLine.style.width = "1px"
dashLine.style.borderBottom = "1px solid blue"
document.body.appendChild(dashLine)
aa = setInterval(showLine , 10)
}
function showLine()
{
if (x <= w)
{
dashLine.style.width = x + "px"
x+=s;
}
}
function out() {
clearInterval(aa)
x = 0
dashLine.style.display = "none";
}
function getPosition(obj)
{
var x = obj.offsetLeft;
var y = obj.offsetTop;
while(obj = obj.offsetParent)
{
x += obj.offsetLeft;
y += obj.offsetTop;
}
return {x:x, y:y}
}
</script>
<body>
<p>paragraph , abc <a onmouseover="ani(this)" onmouseout="out(this)" >Blurry text with</a>, wo, <a onmouseover="ani(this)" onmouseout="out(this)" >Blurry</a>
</p>
---------------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
a.NUL{
text-decoration: none;
color:red;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var handler = null;
var objHref = null;
var index = 0;
function showUnderline(){
objHref = event.srcElement;
handler = setInterval(drawUnderLine, 50)
}
function clearUnderline(){
var obj = event.srcElement;
obj.innerHTML=obj.innerText;
clearInterval(handler);
index = 0;
}
function drawUnderLine(){
if(objHref!=null){
var text = objHref.innerText;
var len = text.length;
if(index<len){
objHref.innerHTML="<u>"+text.substr(0,++index)+"</u>"+text.substr(index);
}else{
clearInterval(handler);
index = 0;
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" class="NUL" onmouseover="showUnderline()" onmouseout="clearUnderline()">我爱中华我爱中华我爱中华我爱中华1</A><br/>
<A HREF="#" class="NUL" onmouseover="showUnderline()" onmouseout="clearUnderline()">我爱中华我爱中华我爱中华我爱中华2</A><br/>
<A HREF="#" class="NUL" onmouseover="showUnderline()" onmouseout="clearUnderline()">我爱中华我爱中华我爱中华我爱中华3</A><br/>
<A HREF="#" class="NUL" onmouseover="showUnderline()" onmouseout="clearUnderline()">我爱中华我爱中华我爱中华我爱中华4</A><br/>
</BODY>
</HTML>
以上是一个帖子要的
http://community.youkuaiyun.com/Expert/topic/5772/5772161.xml?temp=.3473169
比如：鼠标指向以下文字时
我爱中华
当你刚指向它时，先是“我”底下有了下划线，接着“爱”字也有了下划线，再接着“中”也出
现了下划线，最后“华”也是。
即：
我爱中华 >> 我爱中华 >> 我爱中华 >> 我爱中华
-- ---- ------ --------
本人觉得挺有意思的，但是好象在哪里见过，最后想起是Ｆｌａｓｈ中的一个简单的超链接应用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
