시 나 웨 이 보 로그 인 메 일 알림 효 과 를 모방 한 js 코드

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>     </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; 

//  document      
$(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(); 
} 
}) 

//      
function blus(){ 
$(value.divTip).hide(); 
} 

//          
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(); 
} 

//       
function valChange(){ 
var tex = $this.val();//      
var fronts = "";//    “@”       
var af = /@/; 
var regMail = new RegExp(tex.substring(tex.indexOf("@")));// “@”      ,         ，       。       new  。 


//      ，     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();} 
//     1 LI       
if(index>1){ 
//      “@”    
if(af.test(tex)){ 
//    “@”                 
fronts = tex.substring(tex.indexOf("@"),0); 
$(this).text(fronts+valAttr); 
//      “@”    ，     LI email   
if(regMail.test($(this).attr("email"))){ 
$(this).show(); 
}else{ 
if(index>1){ 
$(this).hide(); 
} 
} 

} 
//       “@”    
else{ 
$(this).text(tex+valAttr); 
} 
} 
}) 
} 
} 


//               ，                ; 
if($.browser.msie){ 
$(this).bind("propertychange",function(){ 
valChange(); 
}) 
}else{ 
$(this).bind("input",function(){ 
valChange(); 
}) 
} 


//       LI 
$(value.divTip).children(). 
hover(function(){ 
indexLi = $(this).index();//          LI   ; 
if($(this).index()!=0){ 
$(this).addClass("active").siblings().removeClass(); 
} 
}) 


//        LI     
$this.keydown(function(event){ 
if(event.which == 38){//   
keychang("up") 
}else if(event.which == 40){//   
keychang() 
}else if(event.which == 13){ //   
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> 
</head> 
<body> 
<div class="login"> 
<div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="  /    /   " /></div> 
<ul class="on_changes"> 
<li email="">       </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> 
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

시 나 웨 이 보 로그 인 메 일 알림 효 과 를 모방 한 js 코드

좋은 웹페이지 즐겨찾기