文档章节

Jquery实现鼠标移到某个对象,弹出显示层。

深圳大道
 深圳大道
发布于 2016/12/29 15:36
字数 216
阅读 2
收藏 0
/** 
 * 鼠标移上去显示层 
 * @param divId 显示的层ID 
 * @returns 
 */  
$.fn.myHoverTip = function(divId) {  
    var div = $("#" + divId); //要浮动在这个元素旁边的层  
    div.css("position", "absolute");//让这个层可以绝对定位  
    var self = $(this); //当前对象  
    self.hover(function() {  
        div.css("display", "block");  
        var p = self.position(); //获取这个元素的left和top  
        var x = p.left + self.width();//获取这个浮动层的left  
        var docWidth = $(document).width();//获取网页的宽  
        if (x > docWidth - div.width() - 20) {  
            x = p.left - div.width();  
        }  
        div.css("left", x);  
        div.css("top", p.top);  
        div.show();  
    },  
    function() {  
        div.css("display", "none");  
    }  
    );  
    return this;  
}

在哪个对象旁边显示DIV,随自己定义,只要定义一个ID即可:
如: <a id="viewReInfo" href="#" >查看收件人回执情况</a>

需要显示的DIV,根据需求自己定义,同样只需定义ID即可:

如:<div id="receiptInfo" class="receiptInfo"></div>


调用上面的JS函数,代码如下:

$('#viewReInfo').myHoverTip('receiptInfo');

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/39317825

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
25 个模仿 Facebook 界面的 jQuery 插件

本文介绍 25 个 jQuery 插件,主要用于模仿 Facebook 界面,例如模仿对话框、头像识别、消息流和菜单等等。 Hovercard 预览提示信息卡,例如鼠标移到某个链接上就会有个弹出层提示链接的相关...

红薯
2011/11/24
6.2K
3
12 月份 10 个新鲜的 jQuery 插件和教程

1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行...

红薯
2011/12/30
3.2K
6
8 款个性化的 jQuery 和 CSS3 菜单

下面要给大家分享8款非常个性化的jQuery和CSS3菜单,这些菜单由于外观比较独特,所以也许不是非常通用,但是我们可以认可的是这些菜单的设计思路非常棒,值得借鉴。下面一起来看看这些菜单吧...

android哥哥
2012/08/22
2.8K
4
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
67
0
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
593
1

没有更多内容

加载失败,请刷新页面

加载更多

从0开始学FreeRTOS-(列表&列表项)-6

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
23分钟前
4
0
Java的23种设计模式,详细讲解(一)

一、概述 设计模式是解决问题的方案,学习现有的设计模式可以做到经验复用。 拥有设计模式词汇,在沟通时就能用更少的词汇来讨论,并且不需要了解底层细节。 二、创建型 1. 单例(Singleton...

李红欧巴
39分钟前
5
0
android 使用asynctask结合fragment更新UI(另附线程池管理示例)

https://blog.csdn.net/qq_16064871/article/details/70767949

shzwork
39分钟前
3
0
SpringCloud实现分库分表模式下,数据库实时扩容方案

本文源码:GitHub·点这里 || GitEE·点这里 一、项目结构 1、工程结构 2、模块命名 shard-common-entity: 公共代码块shard-open-inte: 开放接口管理shard-eureka-7001: ...

知了一笑
40分钟前
5
0
js--时间切割装换工具类

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 修改data原型对象Format方法 ......

zhengzhixiang
50分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部