日期:2014-05-17  浏览次数:20677 次

【求助】留言界面一种绚丽效果的实现
给大家一个案例:http://www.ruiec.com/message/
就是这个页面他的留言效果是怎么做出来的!
1/鼠标点进去后边框发光
2/边框里面的文字如果你输入字后就会自动消失!
这两种效果是怎么实现的!
------解决方案--------------------
 第一个用伪类实现,第二个我帮你实现了,代码如下

<!DOCTYPE html>
    <head>
    <style>
    </style>
<script>
   function cleartext()
   {
      var inputtext=document.getElementById("inputtext");
  if(inputtext.value=="请输入姓名")
  {
      inputtext.value="";
  inputtext.style.color="black";
  }
   
   }
</script>
    <body>
<body>
<input type="text" id="inputtext" style="font-weight:100; color:#999999; border:1px solid black" value="请输入姓名" onFocus="cleartext();"/>

<input type="text" />
</body>

    </body>
</html>

------解决方案--------------------

<style type="text/css">
        .input_on{ width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #999;background-color:#FFFFCC;}
        .input_out{width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #CCC;background-color:#FFF;}        
    </style>
<input type="text" value=""
             onfocus="$(this).removeClass('input_out');$(this).addClass('input_on');" 
             onblur="$(this).removeClass('input_on');$(this).addClass('input_out');" 
             onmousemove="$(this).removeClass('input_out');$(this).addClass('input_on');" 
             onmouseout="$(this).removeClass('input_on');$(this).addClass('input_out');"
            />

再加上LZ的onfocus事件