雨夜带刀's Blog

Email Suggest 邮箱输入提示

<p>最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。</p>
<a href="http://stylechen.com/wp-content/uploads/demo/email-suggest/index.html" target="_blank">查看演示</a>
<h3>HTML结构部分:</h3>
<pre class="brush: c-sharp">
<div id="login_box">
  <div>
    <label for="email">电子邮箱:</label>
    <input type="text" id="email" autocomplete="off" />
  </div>
  <ul id="email_list">
    <li>请选择邮箱类型</li>
    <li></li>
    <li>@163.com</li>
    <li>@126.com</li>
    <li>@qq.com</li>
    <li>@yahoo.com.cn</li>
    <li>@gmail.com</li>
    <li>@sohu.com</li>
    <li>@hotmail.com</li>
  </ul>
</div>
</pre>
<p>与新浪微博不同的是,我将邮箱后缀都先写在了结构中,然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete="off"属性是用来关闭浏览器默认的cookie提示的,如果不关闭这个提示将会弹出2个层,新浪微博的就没有关闭,这应该算是一个BUG吧。</p>

未知高度的图片垂直居中

<p>图片的宽度和高度是未知的,没有固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求,所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图,外部容器的宽度和高度固定,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。