基于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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
详解jQuery-each()方法
Mar 13 jQuery
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP集成FCK的函数代码
2008/09/27 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python浪漫表白源码
2019/04/05 Python
python3 logging日志封装实例
2020/04/08 Python
python3将变量输入的简单实例
2020/08/19 Python
python 装饰器重要在哪
2021/02/14 Python
建议书怎么写
2014/03/12 职场文书
函授生自我鉴定
2014/03/25 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
创业女性典型材料
2014/05/02 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
婚礼父母致辞
2015/07/28 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server