快捷導(dǎo)航

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

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

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

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

因為剛學(xué)封裝JQUERY插件所以就做的稍微麻煩一點，其實在前臺頁面直接就可以用mouseover,mouseout,mousemove三個事件就行了

(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);

前臺的頁面:

<!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="這是一個鏈接">這是一個鏈接^_^！</a>
</body>
</html>

運行效果:

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

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

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

您可能感興趣的文章:

相關(guān)文章

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