注册

Jquery(仿title)实现鼠标移上弹出提示框、移出消失的代码

嗨豆壳技术文章 时间:2014-08-25 17:30:48 [ray]

首先要定位实现这种效果的元素 ,本次通过class,如果是动态显示不同的提示内容,需设置title属性,并通过Jquery给元素绑定 mouseover() 和mouseout() 事件

一、首先要定位实现这种效果的元素 ,本次通过class

二、如果是动态显示不同的提示内容,需设置title属性

三、通过Jquery给元素绑定 mouseover() 和mouseout() 事件

四、再完善下,弹出框跟随鼠标在目标元素上移动

五、用 hover() 事件,不需要mouseover() 、mouseout()分别写效果

// 页面加载完成时执行
$(function () { 
    var x = 10; 
    var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标 
    $(".prompt").hover(function (e) {  //鼠标移上事件 
        this.myTitle = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示 
        this.title = ""; 
        var tooltipHtml = "<div id=&#039;tooltip&#039;>" + this.myTitle + "</div>"; //创建提示框 
        $("body").append(tooltipHtml); //添加到页面中 
        $("#tooltip").css({ 
            "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px" 
        }).show("fast"); //设置提示框的坐标,并显示 
    }, function () {  //鼠标移出事件 
        this.title = this.myTitle;  //重新设置title 
        $("#tooltip").remove();  //移除弹出框 
    }).mousemove(function (e) {   //跟随鼠标移动事件 
        $("#toolti").css({ "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px" 
        }); 
    }); 
}); 

标签

本文地址:https://www.hi-docs.com/article/64.html

上一篇:分享几个国内网站免费的CDN 公共库加速服务

下一篇:百度免费IP地址查询API,查询接口