基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示案例

更新時(shí)間：2016年12月11日 16:27:59 作者：貓爺°

本文主要介紹了基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示的詳細(xì)案例。代碼全面，功能實(shí)用，需要的朋友可以參考借鑒

//這是JS里的代碼MOMO.js

因?yàn)閯倢W(xué)封裝JQUERY插件所以就做的稍微麻煩一點(diǎn)，其實(shí)在前臺(tái)頁(yè)面直接就可以用mouseover,mouseout,mousemove三個(gè)事件就行了

(function ($) {
 $.fn.extend({
 "titleOver": function (e) {
  this[0].myTitle = this[0].title;
  this[0].title = "";
  //創(chuàng)建div元素
  var tooltip = "<div id='tooltip' style='border:1px solid #000000;width:auto;position:absolute;'>" + this[0].myTitle + "</div>"
  $("body").append(tooltip);
  $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show('fast');
 }, "titleOut": function () {
  this[0].title = this[0].myTitle;
  $("#tooltip").remove();
 }, "titleMove": function (e) {
  $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
 }
 });
 //默認(rèn)鼠標(biāo)坐標(biāo)
 var x = 10;
 var y = 20;
})(window.jQuery);

前臺(tái)的頁(yè)面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JqueryDemo</title>
 <script type="text/javascript" src="script/jquery-1.8.3.js"></script>
 <script type="text/javascript" src="script/MOMO.js"></script>
 <script type="text/javascript">
 $(function () {
  $("a").mouseover(function (e) {
  $(this).titleOver(e);
  }).mouseout(function () {
  $(this).titleOut();
  }).mousemove(function (e) {
  $(this).titleMove(e);
  });
 });
 </script>
</head>
<body>
 <a href="#" title="這是一個(gè)鏈接">這是一個(gè)鏈接^_^！</a>
</body>
</html>

運(yùn)行效果:

當(dāng)然還可以把DIV的內(nèi)容換成圖片，就形成了圖片的懸浮效果

努力學(xué)習(xí).....

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級(jí)下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁(yè)面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-08-08
jquery Validation表單驗(yàn)證使用詳解
功能強(qiáng)大的 jquery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號(hào)碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身?yè)碛胸S富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
2015-04-04
Jquery中children與find之間的區(qū)別詳細(xì)解析
這篇文章主要是對(duì)Jquery中children與find之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能的方法,涉及jQuery操作數(shù)據(jù)實(shí)現(xiàn)補(bǔ)全的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
用jQuery實(shí)現(xiàn)可輸入多選下拉組合框?qū)嵗a
這篇文章主要介紹了用jquery實(shí)現(xiàn)可輸入多選下拉組合框的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
jQuery日程管理插件fullcalendar使用詳解
這篇文章主要介紹了jQuery日程管理插件fullcalendar使用方法，整合農(nóng)歷節(jié)氣和節(jié)日，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery的一些注意
jQuery的一些注意...
2006-12-12
jQuery向webApi提交post json數(shù)據(jù)
這篇文章主要介紹了jQuery向webApi提交post json數(shù)據(jù)的方法，非常不錯(cuò)，需要的的朋友參考下
2017-01-01
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼。
2009-07-07
jQuery實(shí)現(xiàn)點(diǎn)擊文本框彈出熱門標(biāo)簽的提示效果
點(diǎn)擊文本框彈出熱門標(biāo)簽的效果實(shí)現(xiàn)方法有很多，在本文為大家詳細(xì)介紹下使用jQuery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-11-11