效果预览如下:


HTML代码:

<div class="slider">
<label>Name</label><input type="text" />
</div>
<div class="slider">
<label>Street</label><input type="text" />
</div>
<div class="slider">
<label>E-mail</label><input type="text" />
</div>

 
CSS代码:注意div.slider相对定位,label改为块级元素,绝对定位.这样通过改变label的left属性,实现效果.

*{margin:0;padding:0;font-family: sans-serif,微软雅黑,Microsoft YaHei,Helvetica,Tahoma,StSun,宋体,SimSun;line-height: 1.5em;font-size: 14px;}
.slider
{position:relative;margin:0 0 10px 50px;}
div.slider label
{position:absolute;display:block;margin:1px 0 0 2px;padding:2px;}
input[type="text"]
{ width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px;border-radius:4px;-webkit-border-radius:4px; }
input[type="text"]:focus
{ border-color:#777; }

    JS代码:JS也没什么注意的了,大概就是循环添加事件而已.

<script type="text/javascript">
var labelSlider = {
data: {
tween: {
property:
"left",
duration:
300
},
set:
-50
},
start:
function () {
this.divContainers = $$("div.slider");
for (var i = 0; i < this.divContainers.length; i++) {
this.divContainers[i].getElement("label").set("tween", this.data.tween);
this.divContainers[i].getElement("input").addEvents({
focus:
this.left.bind(this, [i]),
blur:
this.goback.bind(this, [i])
});
}
},
left:
function (at) {
this.divContainers[at].getElement("label").get("tween").start(this.data.set);
},
goback:
function (at) {
if (this.divContainers[at].getElement("input").value == "") {
this.divContainers[at].getElement("label").get("tween").start(0);
}
}
};
labelSlider.start();
</script>
 学校的时光还是那么无聊,还要多久才能走出这个悲剧的环境.
等下一站天亮吧!

作者: !nothing 发表于 2011-04-23 18:35 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架