图片提示效果

tips.png

/*思路
1.鼠标移入超链接、
2.创建一个div元素，元素的内容为title的属性的值
3.为创建的元素追加到文档中
4.为它设置x和y轴的坐标，移除div元素
*/
css

 #tooltip{
            position: absolute;
        }
        #tooltip>img{
            width: 200px;
            height: 200px;
        }
        ul li{
            list-style-type: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 30px;
        }
        ul li img{
            width: 200px;
            height: 200px;
        }
       .tooltip{
            width: 200px;
            height: 200px;
           position: relative;
        }
        .tooltip>img{
            width: 200px;
            height: 200px;
        }

html

<ul>
    <li><a href="img/1.jpg" class="tooltip" title="trees"><img src="img/1.jpg" alt=""></a></li>
    <li><a href="img/2.jpg" class="tooltip" title="aaa"><img src="img/2.jpg" alt=""></a></li>
    <li><a href="img/3.jpg" class="tooltip" title="river"><img src="img/3.jpg" alt=""></a></li>
    <li><a href="img/4.jpg" class="tooltip" title="city"><img src="img/4.jpg" alt=""></a></li>
</ul>

js

$(document).ready(function () {
    var x =10;
    var y =20;
    $("a.tooltip").mouseover(function (e) {
        this.myTitle = this.title;
        this.title = "";
        var imgTitle = this.myTitle ? "</br>"+this.myTitle : "";
        // 创建一个id为tooltip的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")
    }).mouseout(function () {
        this.title = this.myTitle;
        $("#tooltip").remove();
    }).mousemove(function (e ){
        $("#tooltip")
            .css({
                "top":(e.pageY+y) +"px",
                "left":(e.pageX+x) + "px"
            })
    })
})