仿新浪微博登陸郵箱提示效果的js代碼

本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果具體實現代碼如下感興趣的朋友可以參考下希望對大家有所幫組復制代碼代碼如下:

　　
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>無標題文檔</title>
<script type="text/javascript" src="@public/js/jqueryvjs"></script>
<script type="text/javascript">
$(function(){
$fnextend({
"changeTips":function(value){
value = $extend({
divTip:""
}value)

var $this = $(this);
var indexLi = ;

//點擊document隱藏下拉層
$(document)click(function(event){
if($(eventtarget)attr("class") == valuedivTip || $(eventtarget)is("li")){
var liVal = $(eventtarget)text();
$thisval(liVal);
blus();
}else{
blus();
}
})

//隱藏下拉層
function blus(){
$(valuedivTip)hide();
}

//鍵盤上下執行的函數
function keychang(up){
if(up == "up"){
if(indexLi == ){
indexLi = $(valuedivTip)children()length;
}else{
indexLi;
}
}else{
if(indexLi == $(valuedivTip)children()length){
indexLi = ;
}else{
indexLi++;
}
}
$(valuedivTip)children()eq(indexLi)addClass("active")siblings()removeClass();
}

//值發生改變時
function valChange(){
var tex = $thisval();//輸入框的值
var fronts = "";//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(texsubstring(texindexOf("@")));//有“@”之後的字符串注意正則字面量方法是不能用變量的所以這裡用的是new方式

//讓提示層顯示並對裡面的LI遍歷
if($thisval()==""){
blus();
}else{
$(valuedivTip)
show()
children()
each(function(index) {
var valAttr = $(this)attr("email");
if(index==){$(this)text(tex)addClass("active")siblings()removeClass();}
//索引值大於的LI元素進處處理
if(index>){
//當輸入的值有“@”的時候
if(aftest(tex)){
//如果含有“@”就截取輸入框這個符號之前的字符串
fronts = texsubstring(texindexOf("@"));
$(this)text(fronts+valAttr);
//判斷輸入的值“@”之後的值是否含有和LI的email屬性
if(regMailtest($(this)attr("email"))){
$(this)show();
}else{
if(index>){
$(this)hide();
}
}

}
//當輸入的值沒有“@”的時候
else{
$(this)text(tex+valAttr);
}
}
})
}
}

//輸入框值發生改變的時候執行函數這裡的事件用判斷處理浏覽器兼容性;
if($browsermsie){
$(this)bind("propertychange"function(){
valChange();
})
}else{
$(this)bind("input"function(){
valChange();
})
}

//鼠標點擊和懸停LI
$(valuedivTip)children()
hover(function(){
indexLi = $(this)index();//獲取當前鼠標懸停時的LI索引值;
if($(this)index()!=){
$(this)addClass("active")siblings()removeClass();
}
})

//按鍵盤的上下移動LI的背景色
$thiskeydown(function(event){
if(eventwhich == ){//向上
keychang("up")
}else if(eventwhich == ){//向下
keychang()
}else if(eventwhich == ){ //回車
var liVal = $(valuedivTip)children()eq(indexLi)text();
$thisval(liVal);
blus();
}
})
}
})

$("#loginName")changeTips({
divTip:"on_changes"
});
})
</script>
<style type="text/css">
*{margin:;padding:;}

login{width:px; margin: auto; background:#EBEBEB; position:relative;}

input{ width:px; height:px; margin:px ; lineheight:px;}

login on_changes{width:px; position:absolute; top:px; liststyle:none; background:#FFF; border:px solid #; display:none; padding:px;}

login on_changes li{margin:px;padding:px;}

login on_changes liactive{ background:#CEEFF;}

</style>
</head>
<body>
<div class="login">
<div class="ln"><input type="text" maxlength="" name="loginName" id="loginName" placeholder="郵箱/會員帳號/手機號" /></div>
<ul class="on_changes">
<li email="">請選擇郵箱類型</li>
<li email=""></li>
<li email="@sinacom"></li>
<li email="@com"></li>
<li email="@qqcom"></li>
<li email="@hotmailcom"></li>
<li email="@com"></li>
<li email="@gmailcom"></li>
<li email="@yahoocom"></li>
</ul>
</div>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19831.html