初学求教大神！谢谢！！谁能把这个交互页面 js 代码写给我 - WEB前端(UI)

楼主

问题点数：0 回复次数：9

初学求教大神！谢谢！！谁能把这个交互页面 js 代码写给我

如图所示：登录列表框没有获得点击时，提示内容在列表框内显示灰色，当鼠标点击列表框时，提示内容颜色改变自动滑动到列表框边框里面。哪位大神能把这个js简洁明了的写给我，谢谢了！求大神赐教！！！跪谢大神！

搜索更多相关主题的帖子: 如图所示　

第 2 楼

得分:0

求大神赐教啊~~~

第 3 楼

得分:0

O(∩_∩)O~ 这个效果蛮好看的

第 4 楼

得分:0

程序代码：

<html>
<head>
<!--<script type="text/javascript" src="http://code.-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
   

    $("input").focus(function(){
   

        $("span, div").addClass("focus");
    }).blur(function(){
   

        $("span, div").removeClass("focus");
    });
   

});
</script>
<style type="text/css">
*{padding: 0; margin: 0; font-size: 14px; font-family: "宋体";}

span{
    position: absolute;
    z-index: -1;
    left: 8px;
    color: gray;
}
span.focus{
    top: -10px;
    color: purple;
    z-index: 2;
    background: white;
}

input{
    height: 16px;

    line-height: 14px;
    border: none;

    position: absolute;
    width: 200px;
    left: 5px;
    background: transparent;
}

.out-side{
    margin: 20px;
    height: 16px;
    position: relative;
    border: 1px gray solid;

    float: left;

    border-radius: 4px;

    padding: 5px;
    width: 200px;
}
.out-side.focus{
    border-color: purple;
}
</style>
</head>
<body>
<div>
    <div class="out-side">
        <span>用户名/邮件</span>
        <input type="text" name="usr" class="usr"/>
    </div>
</div>
</body>
</html>