Imitation Sina Weibo login mailbox hint effect of JS code

This article for everyone to introduce the use of JS-like Sina Weibo landing mail prompt effect, the specific implementation code as follows, interested friends can refer to, I hope to help the group Copy CodeThe code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" src= "http://s.juzheke.com/min/f= @public/js/jquery.v1.7.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$.fn.extend ({
' Changetips ': function (value) {
Value = $.extend ({
Divtip: ""
},value)

var $this = $ (this);
var indexli = 0;

Click Document to hide the drop down layer
$ (document). Click (Function (event) {
if ($ (event.target). attr ("class") = = Value.divtip | | $ (event.target). is ("Li")) {
var lival = $ (event.target). text ();
$this. Val (lival);
Blus ();
}else{
Blus ();
}
})

Hide drop down layer
function Blus () {
$ (Value.divtip). Hide ();
}

Functions that are executed up and down the keyboard
function Keychang (UP) {
if (up = = "Up") {
if (Indexli = = 1) {
INDEXLI = $ (value.divtip). Children (). Length-1;
}else{
indexli--;
}
}else{
if (Indexli = = $ (value.divtip). Children (). length-1) {
INDEXLI = 1;
}else{
indexli++;
}
}
$ (Value.divtip). Children (). EQ (indexli). addclass ("active"). Siblings (). Removeclass ();
}

When a value changes
function Valchange () {
var tex = $this. val ()//value of the input box
var fronts = "";//The string containing the "@"
var af =/@/;
var regmail = new RegExp (tex.substring (Tex.indexof ("@"));//A string after "@", note that the literal method is not variable. So here's the new way.


Let the hint layer show and traverse the inside of the Li
if ($this. val () = "") {
Blus ();
}else{
$ (value.divtip).
Show ().
Children ().
Each (function (index) {
var valattr = $ (this). attr ("email");
if (index==1) {$ (this). Text (Tex). addclass ("active"). Siblings (). Removeclass ();}
The Li element with index value greater than 1 is processed in
if (index>1) {
When the value entered has "@"
if (Af.test (Tex)) {
If it contains "@" to intercept the string before this symbol in the input box
Fronts = tex.substring (Tex.indexof ("@"), 0);
$ (this). Text (fronts+valattr);
Determines whether the value entered after the value "@" contains the email attribute of Li
if (Regmail.test (this). attr ("email")) {
$ (this). Show ();
}else{
if (index>1) {
$ (this). Hide ();
}
}

}
When the value entered does not have a "@"
else{
$ (this). Text (tex+valattr);
}
}
})
}
}


When the value of the input box is changed, the function is executed, and the event is handled by the judge to handle browser compatibility;
if ($.browser.msie) {
$ (this). Bind ("PropertyChange", function () {
Valchange ();
})
}else{
$ (this). Bind ("Input", function () {
Valchange ();
})
}


Mouse click and Hover li
$ (Value.divtip). Children ().
Hover (function () {
INDEXLI = $ (this). index ();//Get the Li indexed value of the current mouse hover;
if ($ (this). Index ()!=0) {
$ (this). AddClass ("active"). Siblings (). Removeclass ();
}
})


Move the background color of Li by pressing the keyboard up and down
$this. KeyDown (function (event) {
if (Event.which = = 38) {//Up
Keychang ("Up")
}else if (Event.which = 40) {//Down
Keychang ()
}else if (Event.which = 13) {//Enter
var lival = $ (value.divtip). Children (). EQ (indexli). text ();
$this. Val (lival);
Blus ();
}
})
}
})


$ ("#loginName"). Changetips ({
Divtip: ". On_changes"
});
})
</script>
<style type= "Text/css" >
*{margin:0;padding:0;}

. login{width:400px margin:0 Auto; background: #EBEBEB; position:relative;}

input{width:230px; height:28px margin:10px 0; line-height:28px;

. login. on_changes{width:232px; position:absolute; top:40px; list-style:none; background: #FFF; border:1px solid #000; Display:none; padding:10px;}

. login. On_changes li{margin:8px;padding:4px;}

. login. on_changes li.active{background: #CEE7FF;}

</style>
<body>
<div class= "Login" >
<div class= "ln" ><input type= "text" maxlength= "128" name= "LoginName" "id=" LoginName "placeholder=" Mailbox/member account/mobile number "/></div>
<ul class= "On_changes" >
<li email= "" > Please select a mailbox type </li>
<li email= "" ></li>
<li email= "@sina. com" ></li>
<li email= "@163.com" ></li>
<li email= "@qq. com" ></li>
<li email= "@hotmail. com" ></li>
<li email= "@126.com" ></li>
<li email= "@gmail. com" ></li>
<li email= "@yahoo. com" ></li>
</ul>
</div>
</body>