jquery实现鼠标点击输入框弹出隐藏信息效果

2周前 (05-09 14:51)阅读11回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4714
  • 级别管理员
  • 主题942
  • 回复2
楼主

这是一种很不错的jquery弹出提示层特效,具有良好用户体验,当用户点击输入框时弹出提示信息层,光标移开后自动隐藏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>jquery实现鼠标点击输入框弹出隐藏信息效果_武鸣人</title> 
<style type="text/css"> 
.www_wuming_ren{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} 
</style> 
<script src="/img/jquery_wuming_ren.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input[id=search_wwwwumingren]").focus(function(even){ 
var pos=$(this).offset(); 
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
$(".www_wuming_ren").css({left:pos.left,top:pos.top+20+"px",display:"block"}); 
}); 
document.onclick=function(e){ 
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
var e=e?e:window.event; 
var tar = e.srcElement||e.target; 
if(tar.id!="search_wwwwumingren"){ 
if($(tar).attr("class")=="www_wuming_ren"){ 
$(".www_wuming_ren").css("display","block") 
}else{ 
$(".www_wuming_ren").css("display","none"); 
} 
} 
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
}) 
</script> 
</head> 
<body> 
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件,请刷新页面后看效果!<br />
<input id="search_wwwwumingren" />  鼠标点击文本框就可以看到效果
<div class="www_wuming_ren"> <a href="https://www.wuming.ren" target="_blank">武鸣人</a>各种信息免费发布,资源共享合作共赢!</div> 
</body> 
</html>


0
0
收藏0
回帖

jquery实现鼠标点击输入框弹出隐藏信息效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息