任务视频V2.0

任务视频V1.0

知识点

事件对象

JavaScript 在事件处理函数中默认传递了event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。jQuery中的事件对象就是event 对象，通过处理函数默认传递接受，如：

//通过处理函数传递事件对象

$(“#btn”).bind(“click”， function (e) {  //接受事件对象参数

alert(e);

});

event对象常用的属性如表所示。                                       

事件冒泡

如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。

事件冒泡可能会引起预料之外的效果，为了解决这些问题，jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。

教学课件V2.0

教学课件V1.0

制作图片提示效果

任务描述

当鼠标移动到小图时，显示该图片的大图片及图片的标题，如图所示，当鼠标在小图范围内移动时，提示图片跟随鼠标移动；当鼠标移出小图片时，提示的大图片不显示。

任务分析

实现图片提示效果的具体思路如下：

1. 当鼠标滑入超链接时创建一个<div>元素，<div>元素的内容为title属性的值。

2. 将创建的<div>元素追加到文档中。

3. 设置新建的<div>元素的x坐标和y坐标，使它显示在鼠标位置的旁边。

4. 当鼠标滑出超链接时，移除<div>元素。

可以使用jQuery的DOM操作新建<div>元素，并将它添加到文档中，设置<div>元素坐标就需要使用事件对象。

任务实现

$(function(){

        varx = 10;

        vary = 20;

        $("a.tooltip").mouseover(function(e){

                this.myTitle = this.title;

                this.title = ""; 

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

                var tooltip = "<divid='tooltip'><img src='"+ this.href +"' alt='产品预览图

'/>"+imgTitle+"<\/div>";//创建 div 元素

                $("body").append(tooltip);     //把它追加到文档中                                               

                $("#tooltip")

                        .css({

                                "top": (e.pageY+y) +"px"，                  //使用事件对象获取垂直坐标

                                "left":  (e.pageX+x) + "px"                /使用事件对象获取水平坐标

                        }).show("fast");        //设置x坐标和y坐标，并且显示

   }).mouseout(function(){

                this.title = this.myTitle; 

                $("#tooltip").remove();   //移除

   }).mousemove(function(e){

                $("#tooltip")

                        .css({

                                "top": (e.pageY+y) +"px"，

                                "left":  (e.pageX+x) + "px"

                        });

        });

})

根据所给素材，制作如所示页面，当鼠标移到小图片上，则提示相应图片的大图，鼠标在小图片上移动时，提示图片跟随鼠标移动，当鼠标移开图片时，提示图片消失。

参考答案