亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2016年12月11日 16:27:59   作者：貓爺°  
本文主要介紹了基于jquery實現(xiàn)的鼠標懸停提示的詳細案例。代碼全面，功能實用，需要的朋友可以參考借鑒

//這是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" });
 }
 });
 //默認鼠標坐標
 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)文章

最新評論