快捷導(dǎo)航

Jquery實(shí)現(xiàn)鼠標(biāo)移上彈出提示框、移出消失思路及代碼

更新時(shí)間：2013年05月19日 14:49:18 作者：

具體思路為：.首先要定位實(shí)現(xiàn)這種效果的元素，本次通過class；如果是動(dòng)態(tài)顯示不同的提示內(nèi)容，需設(shè)置title;通過JQ給定位到元素加上 mouseover 和mouseout 事件

思路：

1.首先要定位實(shí)現(xiàn)這種效果的元素，本次通過class

2.如果是動(dòng)態(tài)顯示不同的提示內(nèi)容，需設(shè)置title

3.通過JQ給定位到元素加上 mouseover 和mouseout 事件

4.再完善下，彈出框跟隨鼠標(biāo)在目標(biāo)元素上移動(dòng)

5.再把 mouseover 、mouseout 合并成 hover

復(fù)制代碼代碼如下:

 
//頁面加載完成 
$(function () { 
&nbsp; &nbsp; var x = 10; 
&nbsp; &nbsp; var y = 20; //設(shè)置提示框相對(duì)于偏移位置，防止遮擋鼠標(biāo) 
&nbsp; &nbsp; $(".prompt").hover(function (e) { &nbsp;//鼠標(biāo)移上事件 
&nbsp; &nbsp; &nbsp; &nbsp; this.myTitle = this.title; //把title的賦給自定義屬性 myTilte ，屏蔽自帶提示 
&nbsp; &nbsp; &nbsp; &nbsp; this.title = ""; 
&nbsp; &nbsp; &nbsp; &nbsp; var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //創(chuàng)建提示框 
&nbsp; &nbsp; &nbsp; &nbsp; $("body").append(tooltipHtml); //添加到頁面中 
&nbsp; &nbsp; &nbsp; &nbsp; $("#tooltip").css({ 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "top": (e.pageY + y) + "px", 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "left": (e.pageX + x) + "px" 
&nbsp; &nbsp; &nbsp; &nbsp; }).show("fast"); //設(shè)置提示框的坐標(biāo)，并顯示 
&nbsp; &nbsp; }, function () { &nbsp;//鼠標(biāo)移出事件 
&nbsp; &nbsp; &nbsp; &nbsp; this.title = this.myTitle; &nbsp;//重新設(shè)置title 
&nbsp; &nbsp; &nbsp; &nbsp; $("#tooltip").remove(); &nbsp;//移除彈出框 
&nbsp; &nbsp; }).mousemove(function (e) { &nbsp; //跟隨鼠標(biāo)移動(dòng)事件 
&nbsp; &nbsp; &nbsp; &nbsp; $("#toolti").css({ "top": (e.pageY + y) + "px", 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "left": (e.pageX + x) + "px" 
&nbsp; &nbsp; &nbsp; &nbsp; }); 
&nbsp; &nbsp; }); 
}); 