聚美优品 登陆框样式 求教
本帖最后由 walunwine5 于 2012-08-23 20:19:15 编辑
刚刚看到聚美优品的登陆框效果非常好..想模仿一下..但是他自己的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(); });