<p>最近的项目会用到登录框邮箱输入提示的功能，于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个，效果和新浪微博的基本一致，但是实现原理可能会有区别。</p>
<a href="https://blog.yiguochen.com/wp-content/uploads/demo/email-suggest/index.html" target="_blank">查看演示</a>
<h3>HTML结构部分：</h3>
<pre class="brush: c-sharp">
&lt;div id="login_box"&gt;
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="email"&gt;电子邮箱：&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="email" autocomplete="off" /&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;ul id="email_list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;请选择邮箱类型&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@163.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@126.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@qq.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@yahoo.com.cn&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@gmail.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@sohu.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@hotmail.com&lt;/li&gt;
&nbsp;&nbsp;&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>与新浪微博不同的是，我将邮箱后缀都先写在了结构中，然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete="off"属性是用来关闭浏览器默认的cookie提示的，如果不关闭这个提示将会弹出2个层，新浪微博的就没有关闭，这应该算是一个BUG吧。</p>
阅读全文 »
- 23rd 01 2011
- JavaScript
- 按键事件
<p>图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>