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