熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 11:53:25  來源: JSP教程 
本文為大家介紹下使用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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.