基于mootools1.3创意模仿表单

效果预览如下:

Name

Street

E-mail

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>

 学校的时光还是那么无聊，还要多久才能走出这个悲剧的环境.
等下一站天亮吧！