jQuery学习记录2

这次是跟随鼠标的提示的一种实现，唯一要注意的就是新建一个div之后，要先把它的position设为absolute之后，才能设置它的偏移

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jQuery.js"> </script>
<script>
$(document).ready(function(){
    var x=20;
    var y=20;
    $("a").mouseover(function(e){
        this.xxx=this.title;
        this.title="";
        var tooltip="<div id='tooltip'>"+this.xxx+"</div>";
        $("body").append(tooltip);
        $("#tooltip").css({"position":"absolute","top":"20px","left":"20px","fontSize":"70px"})
                      .show("fast");
    })
    $("a").mouseout(function(e){
        this.title=this.xxx;
        $("#tooltip").remove();
        
    })
    $("a").mousemove(function(e){
        $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
    })
    
})
</script>
</head>
<body>
<a href="#" class="tooltip" title="这是一个链接">这是一个链接</a>
</body>

 之后实现了鼠标滑过图片时显示大图：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jQuery.js"> </script>
<script>
$(document).ready(function(){
    var x=20;
    var y=20;
    $("a").mouseover(function(e){
        this.xxx=this.title;
        this.title="";
        this.imge=this.href;
        var tooltip="<div id='tooltip'><img src='"+this.imge+"'/></div>";
        var imgtitle="<p>"+this.xxx? "<br/>"+this.xxx :""+"</p>";
         $("body").append(tooltip);
        $("#tooltip").append(imgtitle);
        $("#tooltip").css({"position":"absolute","top":"20px","left":"20px"})
                      .show("fast");
    })
    $("a").mouseout(function(e){
        this.title=this.xxx;
        $("#tooltip").remove();
        
    })
    $("a").mousemove(function(e){
        $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
    })
    
})
</script>
</head>
<body>
<ul>
<li><a href="../img/adminBK.jpg" class="tooltip" title="这是月亮"><img src="../img/adminBK.jpg"  height="125" width="150" alt="月亮" /></a></li>
</ul>
</body>

 

posted @ 2013-11-05 14:32  火火加油  阅读(148)  评论(0)  编辑  收藏  举报