本文为大家介绍下使用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>
