文档章节

jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息

深圳大道
 深圳大道
发布于 2016/12/29 15:40
字数 354
阅读 9
收藏 0
$(获取到需要弹出浮动框的元素obj).hover(function () {
            //鼠标移动时
            //获取到需要弹出浮动框的元素obj
            divobj = document.getElementById(obj);
            //获取obj的位置,left及top,IE及FF3.0以上都支持
            divobjleft = divobj.getBoundingClientRect().left;
            divobjtop = divobj.getBoundingClientRect().top;
            //为弹出的div的left,top赋值
            divobjx = divobjleft + 0 /* 弹出的div距离obj左边的距离,取实际值 */;
            divobjy = divobjtop + 50 /* 弹出的div距离obj顶部的距离,取实际值 */;
            // 定义弹出div
            var x = "<div id='description' class='help' style='left:" + divobjx + "px; top:" + divobjy + "px;'>这里是内容,也可以通过参数来传递</div>";
            //通过insertAdjacentHTML来写入到html内(这个参数火狐不支持,但是可能通过兼容代码 让火狐兼容insertAdjacentHTML 属性,兼容代码不长,就几十行)
            document.body.insertAdjacentHTML("afterBegin", x);
        }, function () {
            //鼠标移出时,通过closeDiv()移除这个div
            closeDiv("description");
        })

        /* Sart 移除元素方法 */
        function closeDiv(obj) {
            var divobj = document.getElementById(obj);
            divobj.parentNode.removeChild(divobj);
        }
        /* End移除元素方法 */

        /* Start 兼容代码 让火狐兼容insertAdjacentHTML 属性 */
        if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {
            HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) {
                switch (where) {
                    case "beforeBegin":
                        this.parentNode.insertBefore(parsedNode, this);
                        break;
                    case "afterBegin":
                        this.insertBefore(parsedNode, this.firstChild);
                        break;
                    case "beforeEnd":
                        this.appendChild(parsedNode);
                        break;
                    case "afterEnd":
                        if (this.nextSibling) {
                            this.parentNode.insertBefore(parsedNode, this.nextSibling);
                        } else {
                            this.parentNode.appendChild(parsedNode);
                        }
                        break;
                }
            };
            HTMLElement.prototype.insertAdjacentHTML = function (where, htmlStr) {
                var r = this.ownerDocument.createRange();
                r.setStartBefore(this);
                var parsedHTML = r.createContextualFragment(htmlStr);
                this.insertAdjacentElement(where, parsedHTML);
            };
            HTMLElement.prototype.insertAdjacentText = function (where, txtStr) {
                var parsedText = document.createTextNode(txtStr);
                this.insertAdjacentElement(where, parsedText);
            };
        }
        /* End 兼容代码 让火狐兼容insertAdjacentHTML 属性 */

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

共有 人打赏支持
深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
2018/06/22
0
0
为开发者准备的 15 款 Tooltip 工具提示 jQuery 插件

tooltip或者infotip或者hint,是一种常见的图形用户界面元素。它用于连同一个光标,通常是一个鼠标光标。当用户将鼠标悬停在一个特定的地方,无需点击,就会出现一个包含关于悬停到这个地方的...

oschina
2013/07/05
15.5K
11
YeYe_SZU/ZoomMarker

ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件 在项目中需要实现类似地图应用那样的,具有鼠标滚动缩放和拖动功能的插件效果,且可以添加具有回调功能的标记点。在网上找...

YeYe_SZU
02/13
0
0
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
427
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
0
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
0
0
《万历十五年》的读后感作文4000字

《万历十五年》的读后感作文4000字: 万历十五年,即1587年,距今已过去432年。在明朝276的历史中,这一年很平淡,并没有什么特别之处。黄仁宇的《万历十五年》一书,有别于其他的历史叙述方...

原创小博客
昨天
0
0
vue组件系列4、Table封装下

知道了slot 怎么用,才可以理解table这样封装的原因 table插件部分 <template> <div> <!-- 关键字部分 --> <div class="pre_search" v-show="show_key"> <label>关键字:......

轻轻的往前走
昨天
0
0
laravel嵌套预加载限制字段

之前有写过laravel关联查询的坑,后经一位博友提醒可以简写,详见https://my.oschina.net/u/3470006/blog/3020215 自己实践了下果然如此,要查询user表和与之关联的信息表userinfo直接可以用...

gcudwork
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部