留言界面一种绚丽效果的实现-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20756 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>