注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

php asp 高端网站开发 微信网站开发 视频会议软硬件

 
 
 

日志

 
 

jquery 鼠标位置弹出提示层 简单美化  

2013-03-12 17:12:11|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

jquery 鼠标位置弹出提示层 简单美化 - 加菲 - 加菲猫

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-1.7.2.min.js"></script>

<style>

 .msgbox{
  display:none;
  left:1px;
  top:1px;
  width:420px;
  min-height:53px;
  padding:10px;
  color:#000000;
  background:#CCCCCC;
  position:fixed;
  z-index:999999;
  border: 1px solid #5e4e3f;
  overflow:hidden;
  
 }
 .msgbox_header{
  clear:both;
  width:100%;
  height:20px;
  padding:10px;
  DISPLAY: block;
  color:#000000;
  border-bottom: 1px dashed #000000;
 }
 .msgbox_body{
  clear:both;
  width:100%;
  height:60px;
  padding:10px;
  
  color:#000000;
 }


a:link       { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }
a:visited    { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }
a:active     { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }


a.e1:link       { font-family: 宋体; font-size: 16px; color: #EA1B23 }
a.e1:visited    { font-family: 宋体; font-size: 16px; color: #EA1B23 }
a.e1:active     { font-family: 宋体; font-size: 16px; color: #FF0000 }


a.e3:link       { font-family: 宋体; font-size: 16px; color: #B50F0F; }
a.e3:visited    { font-family: 宋体; font-size: 16px; color: #B50F0F; }
a.e3:active     { font-family: 宋体; font-size: 16px; color: #FFFF00; }

</style>

<title>jquery</title>

<script>

var MouseEvent = function(e){
 this.x = e.pageX
 this.y = e.pageY
}

var Mouse = function(e){
 var kdheight =  jQuery(document).scrollTop();
 mouse = new MouseEvent(e);
 leftpos = mouse.x+10;
 toppos = mouse.y-kdheight+10;
}

jQuery(
 function(){
  jQuery(".e1,.e3").hover(
   function(e){
    Mouse(e);
    jQuery(".msgbox").css({top:toppos,left:leftpos}).fadeIn(100);
   },function(){
    jQuery(".msgbox").hide();
    }
  )
 }
)


</script>

</head>


<body>
<a href="http://wmnmtm.blog.163.com/" class="e1">肥猫的博客</a>

<a href="http://www.feizhuwang.com/" class="e3">飞猪网</a>

<div class="msgbox">
 <div class="msgbox_header">提示
 </div>
 <div class="msgbox_body">
  这儿是提示层,您可以根据需要将此层个性化!
 </div>
</div >
</body>
</html>


  评论这张
 
阅读(1088)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017