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

#2

zhanglihui2014-07-04 13:52

求大神赐教啊~~~

#3

寒风中的细雨2014-07-11 19:14

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

#4

寒风中的细雨2014-07-11 20:18

程序代码：

<html>
<head>

<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>

#5

寒风中的细雨2014-07-11 20:20

只有本站会员才能查看附件，请登录

试试

#6

zhanglihui2014-07-15 14:29

xiexie

[ 本帖最后由 zhanglihui 于 2014-7-15 14:32 编辑 ]

#7

zhanglihui2014-07-15 14:32

回复 5 楼寒风中的细雨

爱你一万年都不多啊！太感谢

#8

zhanglihui2014-07-15 14:32

回复 5 楼寒风中的细雨

楼上的大神，太感谢了。非常感谢了。相当nice啊！
我就是因为喜欢这个效果！！！
赞赞赞赞赞！！！

#9

keefelu2014-08-13 17:42

<fieldset>
<legend>密码</legend>
......
</fieldset>你可以用这样的样式来体现的

只有本站会员才能查看附件，请登录

[ 本帖最后由 keefelu 于 2014-8-13 17:45 编辑 ]