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

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