jQuery学习实例：图片提示效果

最新推荐文章于 2018-09-09 15:48:00 发布

隔壁小鲜肉

最新推荐文章于 2018-09-09 15:48:00 发布

阅读量566

点赞数

分类专栏：学习总结文章标签： jquery javascript 实例

学习总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

顾名思义，图片提示效果就是当鼠标滑过图片时，提示大图片及说明文字。

下面先放出完整的jQuery代码：

<body>
    <ul>
        <li>
            <a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 ipod"><img src="images/apple_1_bigger.jpg" alt="苹果 ipod">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 ipod nano"><img src="images/apple_2_bigger.jpg" alt="苹果 ipod nano">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iphone"><img src="images/apple_3_bigger.jpg" alt="苹果 iphone">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 mac"><img src="images/apple_4_bigger.jpg" alt="苹果 mac">
                </img>
            </a>
        </li>
    </ul>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        var x = 10;
        var y = 20;
        $("a.tooltip").mousemove(function(e) {
            this.myTitle = this.title;
            this.title = "";
            var imgTitle = this.myTitle ? "</br>" + this.myTitle : "";
            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'
                });
        });
    })
    </script>
</body>

下面对代码逐段分析：

1.当鼠标划入时，给对象添加一个新属性，并把title的值传递给这个属性，然后清空属性title的值。

this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "</br>" + this.myTitle : "";

2.然后将它追加到<div>元素中。

var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";

$("body").append(tooltip);

注意：在判断this.myTitle是否为" "时，使用了三元运算。

三元运算的结构为：Boolen？值1：值2。他的第一个参数必须为布尔值。

当然三元运算也可以用"if(){ }else{ }"代替。

3.需要设置提示元素的top和left值，使提示与鼠标不离得太近，为top和left值增加10px。

var x = 10;
var y = 20;
$("#tooltip")
    .css({
              "top": (e.pageY + y) + 'px',
              "left": (e.pageX + x) + 'px'
     }).show("fast");

4.当鼠标划出时，再把对象的myTitle属性的值又赋给属性title。

.mouseout(function() {
            this.title = this.myTitle;
            $("#tooltip").remove();

5.需要提示效果跟随鼠标一起移动，可以为超链接添加一个mousemove事件。

.mousemove(function(e) {
            $("#tooltip")
                .css({
                    "top": (e.pageY + y) + 'px',
                    "left": (e.pageX + x) + 'px'
                });
        })

实现这个效果的具体思路如下：

一.当鼠标划入图片

1.创建一个<div>元素，div元素内容为大图片及说明文字。

2.将创建的元素append（）添加到body中。

3.为它设置x，y坐标，使他显示在鼠标位置旁边，并用mousemove事件使其随鼠标移动并移动。

二.当鼠标划出图片时，移除<div>元素。