| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1618 人关注过本帖
标题:初学求教大神!谢谢!!谁能把这个交互页面 js 代码写给我
只看楼主 加入收藏
zhanglihui
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2014-7-4
收藏
 问题点数:0 回复次数:9 
初学求教大神!谢谢!!谁能把这个交互页面 js 代码写给我
如图所示:登录列表框没有获得点击时,提示内容在列表框内显示灰色,当鼠标点击列表框时,提示内容颜色改变自动滑动到列表框边框里面。哪位大神能把这个js简洁明了的写给我,谢谢了!求大神赐教!!!跪谢大神!

图片附件: 游客没有浏览图片的权限,请 登录注册

图片附件: 游客没有浏览图片的权限,请 登录注册
搜索更多相关主题的帖子: 如图所示 
2014-07-04 13:41
zhanglihui
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2014-7-4
收藏
得分:0 
求大神赐教啊~~~
2014-07-04 13:52
寒风中的细雨
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:66
帖 子:1710
专家分:8645
注 册:2009-9-15
收藏
得分:0 
O(∩_∩)O~  这个效果蛮好看的
2014-07-11 19:14
寒风中的细雨
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:66
帖 子:1710
专家分:8645
注 册:2009-9-15
收藏
得分: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>
2014-07-11 20:18
寒风中的细雨
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:66
帖 子:1710
专家分:8645
注 册:2009-9-15
收藏
得分:0 
Desktop.zip (32.89 KB)


试试
2014-07-11 20:20
zhanglihui
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2014-7-4
收藏
得分:0 
xiexie

[ 本帖最后由 zhanglihui 于 2014-7-15 14:32 编辑 ]
2014-07-15 14:29
zhanglihui
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2014-7-4
收藏
得分:0 
回复 5 楼 寒风中的细雨
爱你一万年都不多啊!太感谢
2014-07-15 14:32
zhanglihui
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2014-7-4
收藏
得分:0 
回复 5 楼 寒风中的细雨
楼上的大神,太感谢了。非常感谢了。相当nice啊!
我就是因为喜欢这个效果!!!
赞赞赞赞赞!!!
2014-07-15 14:32
keefelu
Rank: 2
等 级:论坛游民
威 望:2
帖 子:27
专家分:40
注 册:2014-8-12
收藏
得分:0 
<fieldset>
    <legend>密码</legend>
    ......
</fieldset>你可以用这样的样式来体现的
图片附件: 游客没有浏览图片的权限,请 登录注册


[ 本帖最后由 keefelu 于 2014-8-13 17:45 编辑 ]
2014-08-13 17:42
快速回复:初学求教大神!谢谢!!谁能把这个交互页面 js 代码写给我
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020665 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved