100分，求渐进的下划线效果，最好是JS的。请进贴看描述。

我想实现以下效果：这是一段文字“1234567,一二三四五六七，我爱aspx”<它们是一个超链接>，当鼠标指向它们时，会出现下划线，但您要注意，是从左到右一个的出现下划线，而不是一下子出现下划线。请路过的CSS或JS高人，强人帮助我一下。我一定感激您。而已一定按时结贴。

解决方案 »

  1.   

    HOVER CSS里.
    做一个GIF(渐变,最后帧时间长一点儿)
      

  2.   

    这种效果js是可以做，但是觉得用个gif格式的图片会更好O.o
      

  3.   

    不错，，用gif比较实用～～～
      

  4.   

    这个与js无关，只是一个css定义具体参见http://www.7880.com/Info/Article-1b58bb80.html
      

  5.   

    <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>
      

  6.   

    大家还是没有明白我要的是什么效果，嗨比如：鼠标指向以下文字时我爱中华当你刚指向它时，先是“我”底下有了下划线，接着“爱”字也有了下划线，再接着“中”也出现了下划线，最后“华”也是。即：
    我爱中华　>> 我爱中华  >> 我爱中华 >> 我爱中华
    --           ----         ------      --------我认为，应该是用ＪＳ技术来作，这样就不限制有多少字了。
      

  7.   

    我的天啊，xjdawu(无法界定)您也太强了，我这个帖子贴出来两天了，在ＪＳ区也挂了一上午（期间有８０多次点击），就是没有一个能答上来的。我太佩服您了。能不能向您拜师啊，再您有空也有心情的时候，指点我一个ＪＳ。对了马上，结贴，给您分。太谢谢了。
      

  8.   

    xjdawu(无法界定)太谢谢您了，向您学习，希望您能考虑一下，收我为学生的事，结贴并且感谢大家，看贴，回贴。
      

  9.   

    有意思的效果，收藏~~,CSDN就是高人出没的地方，好似武林一样，说不定啥时候就跳出个高人吓你一跳。
      

  10.   

    正解应是这样的：
    <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>
      

  11.   

    CSDN是大家交流，共同进步的好地方。
    ----------------------------------------
    <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.borderBottom = "1px solid blue"
    document.body.appendChild(dashLine)
    }
    //下划线的位置，初始长度
    dashLine.style.left = p.x + "px"
    dashLine.style.top = (p.y+h) + "px"
    dashLine.style.width = "1px" //开始循环增加下划线的长度
    aa = setInterval(showLine , 10)
    }function showLine()
    {
    //w即为当前超链接的长度（未考虑换行的情形，比较复杂）
    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)" >abc中文</a>, wo, <a onmouseover="ani(this)" onmouseout="out(this)" >Blurry</a>
    </p>