jquery悬浮提示框

最新推荐文章于 2022-01-25 16:48:23 发布
最新推荐文章于 2022-01-25 16:48:23 发布
阅读量1.8k 收藏
点赞数
分类专栏： jquery
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="jquery.js"></script>  
  4.     <script type="text/javascript">  
  5.         $(function() {  
  6.             x = 5;  
  7.             y = 15;  
  8.             $("p").hover(function(e) {  
  9.                 otitle = this.title;  
  10.                 this.title = "";  
  11.                 var ndiv = "<div id='leo'>" + otitle + "</div>";  
  12.                 $("body").append(ndiv);  
  13.                 $("#leo").css({  
  14.                     "top" : (e.pageY + y) + "px",  
  15.                     "left" : (e.pageX + x) + "px"  
  16.                 }).show(2000);  
  17.                 $(this).mousemove(function(e) {  
  18.                     $("#leo").css({  
  19.                         "top" : (e.pageY + y) + "px",  
  20.                         "left" : (e.pageX + x) + "px"  
  21.                     }).show(1000);  
  22.                 });  
  23.             }, function() {  
  24.                 this.title = otitle;  
  25.                 $("#leo").remove();  
  26.             });  
  27.         });  
  28.     </script>  
  29.     <style type="text/css">  
  30.         #leo {  
  31.             position: absolute;  
  32.             border: 1px solid grey;  
  33.             opacity: 0.8;  
  34.             background: grey;  
  35.         }  
  36.     </style>  
  37. </head>  
  38. <body>  
  39.     <p title="1dfgfdgdfg">If you click on me, I will disappear.</p>  
  40.     <p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>  
  41.     <p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>  
  42.     <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p>  
  43. </body>  
  44. </html>


转自：blog.csdn.net/xpsharp/article/details/8307881

dazhi_100
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery悬浮提示框Demo，非常经典jquery-impromptu
02-16
jQuery悬浮提示框Demo，非常经典jquery-impromptu
JQUERY DIV浮动提示信息
weixin_30472035的博客
09-14 158
function showTips(tips, height, time) { var windowWidth = document.documentElement.clientWidth; var tipsDiv = '<div class="tipsClass">' + tips + '</div>'; $('bod...
jQuery实现网页右下角悬浮层提示
weixin_34216107的博客
05-07 373
最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理，整体上给你的感觉还是太丑，今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下： 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD...
jQuery floatlabels 浮动提示工具
ICode联盟
11-01 56
下载地址 dd:
HTML微博浮动代码,jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
weixin_36257663的博客
06-04 173
本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下：这是一款jQuery实现的仿新浪微博新消息提示框效果，支持智能浮动定位框，新浪微博用来提示消息时候的智能定位框，可以适时关闭窗口，你完全可以将其应用到你网页的其它地方。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
jquery悬浮提示框完整实例
10-22
主要介绍了jquery悬浮提示框实现方法,涉及jQuery鼠标事件响应及页面元素样式的动态操作技巧,需要的朋友可以参考下
jquery 鼠标移入显示悬浮框
09-10
本主题聚焦于"jQuery 鼠标移入显示悬浮框"，这是一个常见的交互设计元素，用于提供额外的信息或者功能，提升用户体验。以下将详细解释这个知识点。 首先，我们要理解悬浮框（通常称为 tooltip）的基本概念。Tooltip...
jquery悬浮框
01-06
当我们谈论"jquery悬浮框"时，我们通常是指使用jQuery实现的一种网页元素，它可以悬浮在页面上，不随页面滚动而消失，常用于显示提示信息、广告或导航菜单。这种悬浮框的实现涉及多个知识点，下面将详细讲解。 1. *...
jquery漂浮广告代码
front_end_fan
09-04 7531
jquery漂浮广告代码有好多种实现方式，本文介绍的这种方法应该算得上是简单、实用、逻辑清晰的方法了。 jquery漂浮广告代码 × --> var xin = true, yin = true; var step = 1; var delay = 10; var $obj; $(function() { $obj =
jqGrid中改变表格中列悬浮框的显示
weixin_38243562的博客
01-25 1017
{header:'${text("资产名称")}', name:'name', index:'a.name', width:200, align:"center",formatter:function(cellvalue,options,rowObject){ return "<span title='"+'审核说明：'+rowObject.repairStatus+"' class='autotip'>"+rowObject.name+"</span>";.
Jquery 好看的悬浮提示 信息提示
06-15
好看的悬浮提示，放在文字上对文字进行提示信息
基于jQuery的鼠标移到问号上出现提示框的demo，可以用于表单项的说明
05-24
基于jQuery的鼠标移到问号上出现提示框的demo，可以用于表单项的说明
Jquery悬浮提示
11-26
Jquery悬浮提示 非常简洁、使用的悬浮提示。可用于给客户一些控件说明提示和帮助说明
jquery.实现div悬浮
10-30
div悬浮实例
6种浮动提示框，弹出窗口，JS代码
10-22
总共有6种浮动提示框，鼠标移动图片或者文字上，会有浮动的提示窗口跟随，跟随鼠标移动，图片部分区域提示等都有
JQuery 悬浮弹出框
henan312的专栏
06-22 1151
var _msg_show_time_id_ = null; (function($) {  $.msg = {   id    : "_msg_div_id_00_11",   longs : 3000,   show  : function(){    $("#" + $.msg.id).fadeOut(1);    $("#" + $.msg.id).fadeIn(600,fu
JQgrid编辑时给必填项加上提示
张二狗的博客
11-27 1735
JQgrid在添加和编辑时，弹出的编辑框里面，难免会很有一些默认必填的选项，但是这个插件我没有在官网文档里面找到默认给这些项加必填提示的参数，只有在点击提交的时候才有参数校验对必填项进行验证提示。 所以我在源码里面做了一下修改，如下，位置在 editGridRow->callback for each()-> createData -> callback for each()里...
jquery计时器（隔一秒元素显示一次）
Mjxiaomihu的博客
09-13 2140
1、html<div class="box"> 我是大当家 <div class="box-inner"> 我是小当家 </div> </div>2、css.box-inner{ display: none } .box.cur .box-inner{ display: block; }3、jquery写法<script s
jtable单元格的悬浮提示和表头标题的悬浮提示
dreary001的博客
06-19 384
http://blog.csdn.net/yufaw/article/details/7434915
jquery悬浮图片
最新发布
03-22
jQuery悬浮图片是一种常见的网页效果，通过使用jQuery库中的方法和事件，实现当鼠标悬浮在图片上时，触发相应的动画效果或交互行为。以下是一种常见的实现方式： 1. 首先，在HTML文件中引入jQuery库和自定义的JavaScript文件： ```html <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="your-script.js"></script> ``` 2. 在HTML文件中添加需要悬浮的图片元素： ```html <img src="your-image.jpg" class="hover-image"> ``` 3. 在自定义的JavaScript文件中编写jQuery代码： ```javascript $(document).ready(function() { // 当鼠标悬浮在图片上时触发事件 $('.hover-image').hover( function() { // 鼠标进入时的动作 $(this).animate({ opacity: '0.5' }, 'fast'); }, function() { // 鼠标离开时的动作 $(this).animate({ opacity: '1' }, 'fast'); } ); }); ``` 上述代码中，使用了`.hover()`方法来绑定鼠标进入和离开事件，当鼠标进入时，通过`.animate()`方法实现图片透明度变化的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值