Jquery實現(xiàn)鼠標移上彈出提示框、移出消失思路及代碼
更新時間:2013年05月19日 14:49:18 作者:
具體思路為:.首先要定位實現(xiàn)這種效果的元素 ,本次通過class;如果是動態(tài)顯示不同的提示內(nèi)容,需設置title;通過JQ給定位到元素加上 mouseover 和mouseout 事件
思路:
1.首先要定位實現(xiàn)這種效果的元素 ,本次通過class
2.如果是動態(tài)顯示不同的提示內(nèi)容,需設置title
3.通過JQ給定位到元素加上 mouseover 和mouseout 事件
4.再完善下,彈出框跟隨鼠標在目標元素上移動
5.再把 mouseover 、mouseout 合并成 hover
//頁面加載完成
$(function () {
var x = 10;
var y = 20; //設置提示框相對于偏移位置,防止遮擋鼠標
$(".prompt").hover(function (e) { //鼠標移上事件
this.myTitle = this.title; //把title的賦給自定義屬性 myTilte ,屏蔽自帶提示
this.title = "";
var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //創(chuàng)建提示框
$("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"
});
});
});
1.首先要定位實現(xiàn)這種效果的元素 ,本次通過class
2.如果是動態(tài)顯示不同的提示內(nèi)容,需設置title
3.通過JQ給定位到元素加上 mouseover 和mouseout 事件
4.再完善下,彈出框跟隨鼠標在目標元素上移動
5.再把 mouseover 、mouseout 合并成 hover
復制代碼 代碼如下:
//頁面加載完成
$(function () {
var x = 10;
var y = 20; //設置提示框相對于偏移位置,防止遮擋鼠標
$(".prompt").hover(function (e) { //鼠標移上事件
this.myTitle = this.title; //把title的賦給自定義屬性 myTilte ,屏蔽自帶提示
this.title = "";
var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //創(chuàng)建提示框
$("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"
});
});
});
相關文章
jQuery實現(xiàn)多級下拉菜單jDropMenu的方法
這篇文章主要介紹了jQuery實現(xiàn)多級下拉菜單jDropMenu的方法,涉及jquery鼠標事件及頁面元素遍歷的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
基于jquery的復制網(wǎng)頁內(nèi)容到WORD的實現(xiàn)代碼
基于jquery的復制網(wǎng)頁內(nèi)容到WORD的實現(xiàn)代碼,需要的朋友可以參考下。2011-02-02
jQuery實現(xiàn)MSN中文網(wǎng)滑動Tab菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)MSN中文網(wǎng)滑動Tab菜單效果代碼,基于jQuery鼠標事件實現(xiàn)頁面元素屬性動態(tài)切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
原生js實現(xiàn)addclass,removeclass,toggleclasss實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)addclass,removeclass,toggleclasss實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起 小編過來看看吧2016-11-11

