读书人

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

发布时间: 2013-01-02 13:08:45 作者: rapoo

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

读书人网 >CSS

热点推荐