日期:2014-05-16  浏览次数:20602 次

聚美优品 登陆框样式 求教
刚刚看到聚美优品的登陆框效果非常好..想模仿一下..但是他自己的JS文件是加密的.
所以来看看各位是否可以调试出他的效果.
具体样式在
http://www.jumei.com/i/account/login/



HTML代码
===================================================
<div class="field username">
<div class="input_container">
<div class="input_container_inner">
<div class="icon"></div>



<label for="login_username">
<div class="input_title" style="display: block;">邮箱/用户名</div>
<{input name="login" class="f-input" required="true" id="in_login" tabindex="1" style="width:201px;height:35px;font:normal 14px Tahoma,Geneva,sans-serif;color:#000;"}> 
</label>
 
 
</div>
</div>
</div>


聚美的开发思路
============================================
输入框中没有输入文字的时候,显示为默认的提示文本.当鼠标在框中且输入文字后默认的提示文本消失.
刚分析了他的原理.
他是通过JQUERY控制更改
---------
<div class="input_title" style="display: block;">邮箱/用户名</div>
---------
这段代码的CSS属性变为DISPLAY:NONE;


麻烦大家帮忙看下.这个要怎么写呢.


先谢过.

====================================
他用了两个不同的JS样式
--------------
<script type="text/javascript">
  jQuery(document).ready(function(){
  jQuery('.field input').focus(function(){
  jQuery(this).closest('.input_container').addClass('active');
  jQuery(this).closest('.field').find('.input_notice_text').show();
  }).focusout(function(){
  jQuery(this).closest('.input_container').removeClass('active');
  jQuery(this).closest('.field').find('.input_notice_text').hide();
  });
  });
</script>
这段代码为更改头像的ICON
====================================
现缺少提示文字消失的JS代码

------解决方案--------------------
jQuery(document).ready(function () {
jQuery('.field input').focus(function () {
jQuery(this).closest('.input_container').addClass('active');
jQuery(this).closest('.field').find('.input_notice_text').show();
}).focusout(function () {
jQuery(this).closest('.input_container').removeClass('active');
jQuery(this).closest('.field').find('.input_notice_text').hide();
}).keydown(function () { $(this).prev().hide(); }).keyup(function () { if (this.value == '') $(this).prev().show(); });