JS实现 用户登录form input框鼠标移入移出效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:url(images/bg.png) repeat-x;}
#Login{width:340px;height:400px;margin:100px auto;}
#Login form input{border:1px solid #598fab;background:#235376; padding-left:15px;color:#BDC8D3; margin-bottom:15px;height:44px;width:330px;line-height:44px;border-radius:23px;}
#Login form .change{background:#11466b;}
#Login form .sub{border:none;position:absolute;right:-7px;top:1px;width:44px;height:44px;border-radius:22px;background:url(images/but1.png);}
#Login form .sub:hover{background:url(images/but2.png);}
#Login form p{position:relative;}
</style>
</head>

<body>
<div id="Login">
    <form>
        <input type="text" value="账号" name="id" />
        <p><input type="text" value="密码"  name="psw"/>
        <input type="submit" value="" class="sub" />
        </p>
    </form>
</div>    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $("#Login form input").focus(function(){
            $(this).addClass("change");            
            if($(this).val()==this.defaultValue)
            {$(this).val("")}
        
        })
    $("#Login form input").blur(function(){
            $(this).removeClass("change");            
            if($(this).val()=="")
            {$(this).val(this.defaultValue)}
        
        })
</script>
</body>
</html>

初始

鼠标移入

有输入内容移出

无输入内容移出

 

images文件夹下的三个图片：bg.png  but1.png  but2.png

posted @ 2014-05-28 15:09  fjenny_贞  阅读(1497)  评论(0)    收藏  举报