首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

留言界面一种绚丽效果的实现

2013-01-02 
【求助】留言界面一种绚丽效果的实现给大家一个案例:http://www.ruiec.com/message/就是这个页面他的留言效

【求助】留言界面一种绚丽效果的实现
给大家一个案例: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事件

热点排行