jquery悬浮提示框完整实例


Posted in Javascript onJanuary 13, 2016

本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考,具体如下:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function() {
      x = 5;
      y = 15;
      $("p").hover(function(e) {
        otitle = this.title;
        this.title = "";
        var ndiv = "<div id='leo'>" + otitle + "</div>";
        $("body").append(ndiv);
        $("#leo").css({
          "top" : (e.pageY + y) + "px",
          "left" : (e.pageX + x) + "px"
        }).show(2000);
        $(this).mousemove(function(e) {
          $("#leo").css({
            "top" : (e.pageY + y) + "px",
            "left" : (e.pageX + x) + "px"
          }).show(1000);
        });
      }, function() {
        this.title = otitle;
        $("#leo").remove();
      });
    });
  </script>
  <style type="text/css">
    #leo {
      position: absolute;
      border: 1px solid grey;
      opacity: 0.8;
      background: grey;
    }
  </style>
</head>
<body>
  <p title="1dfgfdgdfg">If you click on me, I will disappear.</p>
  <p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>
  <p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>
  <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
js实现tab切换效果实例
Sep 16 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
You might like
linux实现php定时执行cron任务详解
2013/12/24 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python统计单词出现的次数
2018/04/04 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
英语系本科生求职信范文
2013/12/18 职场文书
计算机学生求职信范文
2014/01/30 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
公司出差管理制度范本
2015/08/05 职场文书
上班旷工检讨书
2015/08/15 职场文书
导游词之南京中山陵
2019/11/27 职场文书
七年级作文之游记
2019/12/11 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android