首页>>Jquery文字>>全屏的表单一步步注册效果(2014-08-29)

全屏的表单一步步注册效果

全屏的表单一步步注册效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="myform" class="fs-form fs-form-full" autocomplete="off">  
  2.     <ol class="fs-fields">  
  3.         <li>  
  4.             <label class="fs-field-label fs-anim-upper" for="q1">请输入您的名字?</label>  
  5.             <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="您的名字" required/>  
  6.         </li>  
  7.         <li>  
  8.             <label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">您的电子邮件地址是什么?</label>  
  9.             <input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="" required/>  
  10.         </li>  
  11.         <li data-input-trigger>  
  12.             <label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">What's your priority for your new website?</label>  
  13.             <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">  
  14.                 <span><input id="q3b" name="q3" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">Sell things</label></span>  
  15.                 <span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>  
  16.                 <span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>  
  17.             </div>  
  18.         </li>  
  19.         <li data-input-trigger>  
  20.             <label class="fs-field-label fs-anim-upper" data-info="We'll make sure to use it all over">Choose a color for your website.</label>  
  21.             <select class="cs-select cs-skin-boxes fs-anim-lower">  
  22.                 <option value="" disabled selected>Pick a color</option>  
  23.                 <option value="#588c75" data-class="color-588c75">#588c75</option>  
  24.                 <option value="#b0c47f" data-class="color-b0c47f">#b0c47f</option>  
  25.                 <option value="#f3e395" data-class="color-f3e395">#f3e395</option>  
  26.                 <option value="#f3ae73" data-class="color-f3ae73">#f3ae73</option>  
  27.                 <option value="#da645a" data-class="color-da645a">#da645a</option>  
  28.                 <option value="#79a38f" data-class="color-79a38f">#79a38f</option>  
  29.                 <option value="#c1d099" data-class="color-c1d099">#c1d099</option>  
  30.                 <option value="#f5eaaa" data-class="color-f5eaaa">#f5eaaa</option>  
  31.                 <option value="#f5be8f" data-class="color-f5be8f">#f5be8f</option>  
  32.                 <option value="#e1837b" data-class="color-e1837b">#e1837b</option>  
  33.                 <option value="#9bbaab" data-class="color-9bbaab">#9bbaab</option>  
  34.                 <option value="#d1dcb2" data-class="color-d1dcb2">#d1dcb2</option>  
  35.                 <option value="#f9eec0" data-class="color-f9eec0">#f9eec0</option>  
  36.                 <option value="#f7cda9" data-class="color-f7cda9">#f7cda9</option>  
  37.                 <option value="#e8a19b" data-class="color-e8a19b">#e8a19b</option>  
  38.                 <option value="#bdd1c8" data-class="color-bdd1c8">#bdd1c8</option>  
  39.                 <option value="#e1e7cd" data-class="color-e1e7cd">#e1e7cd</option>  
  40.                 <option value="#faf4d4" data-class="color-faf4d4">#faf4d4</option>  
  41.                 <option value="#fbdfc9" data-class="color-fbdfc9">#fbdfc9</option>  
  42.                 <option value="#f1c1bd" data-class="color-f1c1bd">#f1c1bd</option>  
  43.             </select>  
  44.         </li>  
  45.         <li>  
  46.             <label class="fs-field-label fs-anim-upper" for="q4">Describe how you imagine your new website</label>  
  47.             <textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Describe here"></textarea>  
  48.         </li>  
  49.         <li>  
  50.             <label class="fs-field-label fs-anim-upper" for="q5">What's your budget?</label>  
  51.             <input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="1000" step="100" min="100"/>  
  52.         </li>  
  53.     </ol><!-- /fs-fields -->  
  54.     <button class="fs-submit" type="submit">Send answers</button>  
  55. </form>  

 

JavaScript Code
  1. <script>  
  2.             (function() {  
  3.                 var formWrap = document.getElementById( 'fs-form-wrap' );  
  4.   
  5.                 [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {      
  6.                     new SelectFx( el, {  
  7.                         stickyPlaceholder: false,  
  8.                         onChange: function(val){  
  9.                             document.querySelector('span.cs-placeholder').style.backgroundColor = val;  
  10.                         }  
  11.                     });  
  12.                 } );  
  13.   
  14.                 new FForm( formWrap, {  
  15.                     onReview : function() {  
  16.                         classie.add( document.body, 'overview' ); // for demo purposes only  
  17.                     }  
  18.                 } );  
  19.             })();  
  20.         </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_422.html