Web CSDN上这个操作是怎么实现的？鼠标移动到图像


当鼠标移动到图像上去的时候，弹出一个外形比较漂亮的显示框，如图片所示
这个是怎么实现的，个人感觉做的很漂亮，形状怎么做成这样的？

解决方案 »

  1.   

    jquery 用过么？做了一个鼠标放上去去弹title的例子，原理很简单 就是鼠标事件 然后再加上div.
    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <script>
    $(function(){
    var x= 10;
    var y= 20;
    $(".tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title="";
    var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
    $("body").append(tooltip);
    $("#tooltip")
    .css({
    "position":"absolute",
    "border":"1px solid black",
    "background":"#fffdda",
    "fontSize":"12px",
    "top":(e.pageY+y)+"px",
    "left":(e.pageX+x)+"px"
    }).show("fast");
    }).mouseout(function(){
    this.title=this.myTitle;
    $("#tooltip").remove();
    }).mousemove(function(e){
    $("#tooltip")
    .css({
    "top":(e.pageY+y)+"px",
    "left":(e.pageX+x)+"px"
    });
    });
    });
    </script>
    <body>
    <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
    <p><a href="#"  title="这是默认提示1.">自带提示1.</a></p>
    <p><a href="#"  title="这是默认提示1.">自带提示2.</a></p>
    </body>
    </html>
    要想看效果去下个jquery.js。