基于jquery实现的鼠标悬停提示案例


Posted in Javascript onDecember 11, 2016

//这是JS里的代码MOMO.js

因为刚学封装JQUERY插件 所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了

(function ($) {
 $.fn.extend({
 "titleOver": function (e) {
  this[0].myTitle = this[0].title;
  this[0].title = "";
  //创建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>

运行效果:

基于jquery实现的鼠标悬停提示案例

当然还可以把DIV的内容换成图片,就形成了图片的悬浮效果

努力学习.....

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js调用css属性写法
Sep 21 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
jquery滚动条插件(可以自定义)
Dec 11 #Javascript
jquery实现简单的瀑布流布局
Dec 11 #Javascript
js倒计时显示实例
Dec 11 #Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 #Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 #Javascript
JavaScript获取服务器时间的方法详解
Dec 11 #Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 #Javascript
You might like
PHP操作xml代码
2010/06/17 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Django rest framework实现分页的示例
2018/05/24 Python
python实现按首字母分类查找功能
2019/10/31 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
django 取消csrf限制的实例
2020/03/13 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
关于感谢信的范文
2015/01/23 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
工会经费申请报告
2015/05/15 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS