【锋利的jQuery】6、案例研究-某网站的超链接和图片提示效果

<!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>案例研究-某网站的超链接和图片提示效果</title>
    <!-- 在head中引入jQuery -->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }

        p {
            clear: both;
            margin: 0;
            padding: .5em 0;
        }

        /* tooltip */
        #tooltip {
            /*绝对定位*/
            position: absolute;
            border: 1px solid #333;
            background: #f7f5d1;
            padding: 1px;
            color: #333;
            display: none;
        }

        #tooltip2 {
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }

        body {
            /*鼠标十字型 */
            /*cursor: crosshair;*/
            /*修改光标为自己的样式*/
            cursor:url("../../../images/jQuery/ch02/up.gif"), auto;
        }

        img {
            border: none;
        }

        ul, li {
            margin: 0;
            padding: 0; /*左边边距*/
        }

        li {
            list-style: none;
            float: left; /*排列方式*/
            display: inline;
            margin-right: 300px; /*间距*/
            border: 1px solid #AAAAAA; /*边框*/
        }
    </style>
    <script type="application/javascript">

        $(function () {
            var x = 10;
            var y = 20;

            $("a.tooltip").mouseover(function (e) {
                //e相当于event，时间对象
                //创建div对象
                this.mytitle = this.title;
                this.title = "";    //设置标题为空
                var tooltip = "<div id='tooltip'>" + this.mytitle + "</div>";
                $("body").append(tooltip);
                //设置这个tooltip跟随鼠标显示
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");
            }).mouseout(function () {
                //从新吧title设置回去
                this.title = this.mytitle;
                $("#tooltip").remove();
            }).mousemove(function (e) {
                //鼠标移动事件
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
            });

            $("a.tooltip2").mouseover(function (e) {
                //2、图片要有对应的title提示
                this.mytitle = this.title;
                this.title = "";
                var imgTitle = this.mytitle ? "<br/>" + this.mytitle : "";
                //1、首先要提示预览图片,图片为放大的位置
                var tooltip = "<div id='tooltip2'><img src='" + this.href + "' alt='产品预览'/>" + imgTitle + "</div>";
                //添加到文档中
                $("body").append(tooltip);
                //显示
                $("#tooltip2").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");
            }).mouseout(function(){
                //移除
                this.title = this.mytitle;
                $("#tooltip2").remove();
            }).mousemove(function(e){
                $("#tooltip2").css({
                    "top":(e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
            });
        })

    </script>
</head>
<body>
<h3>超链接提示效果：</h3>

<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="这是自带提示2.">自带提示2.</a></p>

<br><br><br><br>
<br><br><br><br>

<h3>图片提示效果：</h3>
<ul>
    <li><a href="../../../images/jQuery/ch03/apple_1_bigger.jpg" class="tooltip2" title="苹果 iPod"><img
            src="../../../images/jQuery/ch03/apple_1.jpg" alt="苹果 iPod"/></a></li>
    <li><a href="../../../images/jQuery/ch03/apple_2_bigger.jpg" class="tooltip2" title="苹果 iPod nano"><img
            src="../../../images/jQuery/ch03/apple_2.jpg"
            alt="苹果 iPod nano"/></a></li>
    <li><a href="../../../images/jQuery/ch03/apple_3_bigger.jpg" class="tooltip2" title="苹果 iPhone"><img
            src="../../../images/jQuery/ch03/apple_3.jpg"
            alt="苹果 iPhone"/></a></li>
    <li><a href="../../../images/jQuery/ch03/apple_4_bigger.jpg" class="tooltip2" title="苹果 Mac"><img
            src="../../../images/jQuery/ch03/apple_4.jpg" alt="苹果 Mac"/></a>
    </li>
</ul>


</body>
</html>

图片资源：

up.gif