jquery鼠标经过弹出层

转:http://www.51xuediannao.com/

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<style>
 .showinfo{
  display:none;
  left:1px;
  top:1px;
  width:422px;
  min-height:53px;
  padding:10px;
  color:#000000;
  background:#CCCCCC;
  position:fixed;
  z-index:999999;
  border: 1px solid #5e4e3f;
 
 }

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(".showinfo").css({top:toppos,left:leftpos}).fadeIn(100);
   },function(){
    jQuery(".showinfo").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="showinfo">
 这儿是提示层,您可以根据需要将此层个性化!
</div >
</body>
</html>

<!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=utf-8" />
 <title>鼠标移到文字上弹出提示层--懒人建站</title>
 <style type="text/css">
 <!--
 .link{
    position: relative;
    z-index:100;
}
#box{
    display: none;
    width: 315px;
    height: 180px;
    border: 1px solid #ff0000;
    background-color:#FFFFFF;
    padding: 12px;
    text-align: left;
    line-height: 175%;
    text-indent: 2em;
    position: absolute;
    z-index:100;
}
 -->
 </style>
 <script type="text/javascript" language="javascript" >
 <!--
  function display(){
document.getElementById("box").style.display="block";
  }
  function disappear(){
document.getElementById("box").style.display="none";
  }
 -->
 </script>
 </head>
<body>
<div class="link">
<a href="#" onmouseover="display()" onmouseout="disappear()">懒人建站—鼠标划过来试试</a>
<div id="box" onmouseover="display()" onmouseout="disappear()">123456我们为您提供-JS代码,网页图标,网页欣赏模板,SEO优化和各种建站技巧;懒人建站只收录实用和能提高用户体验的代码,我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</div>
</div>

<div style="z-index:10;position:relative;background-color:#CCCCCC;border:1px solid #000000;">
我们为您提供-JS代码,网页图标,网页欣赏模板,SEO优化和各种建站技巧;懒人建站只收录实用和能提高用户体验的代码,我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。我们为您提供-JS代码,网页图标,网页欣赏模板,SEO优化和各种建站技巧;懒人建站只收录实用和能提高用户体验的代码,我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。我们为您提供-JS代码,网页图标,网页欣赏模板,SEO优化和各种建站技巧;懒人建站只收录实用和能提高用户体验的代码,我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。我们为您提供-JS代码,网页图标,网页欣赏模板,SEO优化和各种建站技巧;懒人建站只收录实用和能提高用户体验的代码,我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</div>
</body>
</html>

    A+
发布日期:2014年06月08日  所属分类:未分类

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: