圖片提示效果 - KeenLeung－IT工程師數位筆記本

文章出處

效果：

CODE:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無標題 1</title>
<script type="text/javascript" src="jquery-1.11.0.js/jquery-1.11.0.js"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
     var x = 10;  
    var y = 20;
    $(function(){
        $("a.tooltip").mouseover(function(e){
            //取得title值
            this.mytitle = this.title;
            this.title = "";
            var imgtitle = this.mytitle? "<br />" + this.mytitle : "";
            //創建<div>元素
            var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='產品預覽圖' />" + imgtitle + "</div>";
            $("body").append(tooltip);//將它追加到文檔中
            $("#tooltip")
                .css({
                    "top":(e.pageY+y) + "px",
                    "left":(e.pageX+x) + "px"
                }).show("fast");//設置x坐標和y坐標，并顯示
        }).mouseout(function(){
            $("#tooltip").remove();//移除
            this.title = this.mytitle;//恢復title
        }).mousemove(function(e){
            $("#tooltip")
                .css({
                    "top":(e.pageY+y) + "px",
                    "left":(e.pageX+x) + "px"
                });
        });
    });
</script>
</head>

<body>

    <ul>
        <li><a href="apple1.jpg" class="tooltip" title="蘋果 iPod"><img src="apple1.jpg" alt="蘋果 iPod" /></a></li>
        <li><a href="apple2.jpg" class="tooltip" title="蘋果 nano"><img src="apple2.jpg" alt="蘋果 nano" /></a></li>
        <li><a href="apple3.jpg" class="tooltip" title="蘋果 iPhone"><img src="apple3.jpg" alt="蘋果 iPhone" /></a></li>
    </ul>

</body>

</html>