文档章节

一个网页动态框的实现

阿采
 阿采
发布于 2015/12/10 16:02
字数 361
阅读 58
收藏 5
点赞 0
评论 0

小需求:能在一个网页上鼠标点击一下,就在鼠标点击处浮现一个div,里面包含了鼠标点击的项对应的一些后台数据。

简单思路:在网页上放置一个隐藏的div,在鼠标点击时间里想办法获取到需要展示的值赋值给div,然后给div的位置赋值,然后显示这个div。

  1. 获取到要展示的值

    很简单,参考上一篇博文,使用xmlhttprequest,传入点击对象的信息到后台服务,然后获取到服务处理之后的响应。

  2. 给div位置赋值

    这个是个老大难了,使用了position:absolute; related 等等都有个各种问题,网上有很多介绍这些东西的内容就不详述了,后来发现使用jquery来做赋值很简单。看下面的代码,只需要在网页点击的对象处事件响应用showDiv;然后在隐藏的div处事件响应用hideDiv,就ok了

 function showDiv(e){
    ee=arguments.callee.caller.arguments[0] || window.event;  //此行很重要,为了适配不同浏览器

    var url ="getsomething.php?enb="+e.innerHTML;
		var showstr;
		var xmlhttp;
        xmlhttp=new XMLHttpRequest();
	    
        xmlhttp.onreadystatechange=function()
        {  
		    if (xmlhttp.readyState==4 && xmlhttp.status==200){
				
		        showstr =xmlhttp.responseText;
		    }
        }
        xmlhttp.open("GET",url,false);
        xmlhttp.send();
		
	$("#showTip").html(showstr);
		
	$("#showTip").css("top",ee.clientY );
	$("#showTip").css("left",ee.clientX  );
	$("#showTip").show();
	}
function hideDiv(){
        $("#showTip").hide();
    }

   隐藏的div,最重要的是 position:fixed这个style

<div  ondblclick='hideDiv()' id='showTip' style='background-color: #F5F5DC; position: fixed; display: none; '></div>



© 著作权归作者所有

共有 人打赏支持
阿采
粉丝 4
博文 28
码字总数 20837
作品 0
浦东
后端工程师
库房管理系统之遮罩锁屏

前言 学习JavaScript视频的时候了解到了遮罩锁屏,发现B/S的世界真是好玩,好多小功能可以探索可以实践! 是什么 大家可以想一想我们打开网页时,通常需要一些弹框和子界面,然而,有些功能需...

weienjun ⋅ 2017/11/24 ⋅ 0

非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗 ⋅ 2015/11/09 ⋅ 0

javascript常用函数大全 + javascript事半功倍/速成系列 + javascript技巧

创建脚本块 隐藏脚本代码 在不支持JavaScript的浏览器中将不执行相关代码 浏览器不支持的时候显示 链接外部脚本文件 注释脚本 输出到浏览器 document.write(“Hello”); 定义变量 var myVari...

a125138 ⋅ 2012/07/28 ⋅ 0

jquery实现输入框动态增减

主要功能是动态增减输入框,而且支持对各个输入框的检测。 每个输入框在输入内容后,对其进行错误提示 最后通过字符串拼接,将所有的输入框中的内容,用“1234235#34634234#123525”这样的格...

taojinhuo ⋅ 2011/09/24 ⋅ 4

如何在 PPT 里面演示动态图表?

每次在我介绍完 Excel 动态图表的做法之后,就会有人问到:“这个动态图表能不能放到 PPT 里面演示呢?” 有的朋友甚至直接把 Excel 里的动态图表区域复制粘贴到 PPT 里,期望 PPT 里也能有动...

刘万祥ExcelPro ⋅ 2017/03/01 ⋅ 0

使用WKWebView替换UIWebView(转自简书)

iOS8以后,苹果推出了新框架,提供了替换的组件。各种的问题没有了,速度更快了,占用内存少了,一句话,是App内部加载网页的最佳选择! 先看下 的特性: 在性能、稳定性、功能方面有很大提升...

biyu6 ⋅ 2016/07/14 ⋅ 0

使用Selenium模拟浏览器,实现自动爬取数据

最近需要在一个网站下载一批数据。但是输入一个查询,返回三四万条结果,每次只能导出500条,而且每次还得输入下载条目的范围!这样点击下载,还不要了我的老命。于是乎想自动化这个过程。 ...

teelada ⋅ 2017/02/18 ⋅ 0

iOS8以后使用WKWebView替换UIWebView

iOS8以后,苹果推出了新框架,提供了替换的组件。各种的问题没有了,速度更快了,占用内存少了,一句话,是App内部加载网页的最佳选择! 先看下 的特性: 在性能、稳定性、功能方面有很大提升...

-Man ⋅ 2016/10/27 ⋅ 0

12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯 ⋅ 2012/03/28 ⋅ 8

基于Html+js实现的瓦片式的Webgis栅格地图管理平台

基于Html+js实现的Webgis栅格平台 成都领君科技提供的基于HTML5+js开发的瓦片式地图发布平台,适用于几乎所有浏览器(IE6+,遨游,火狐,搜狗,谷歌,360,世界之窗,Opera等)。功能模块包括如...

成都领君科技 ⋅ 2012/04/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 14分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 34分钟前 ⋅ 0

a href="#"

<a href="#">是链接到本页,因为你有的时候需要有个链接的样式,但是又不希望他跳转,这样写,你可以把这个页面去试试

颖伙虫 ⋅ 41分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 41分钟前 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 49分钟前 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 今天 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

4.10/4.11/4.12 lvm讲解 4.13 磁盘故障小案例

准备磁盘分区 fdisk /dev/sdb n 创建三个新分区,分别1G t 改变分区类型为8e 准备物理卷 pvcreate /dev/sdb1 pvcreate /dev/sdb2 pvcreate /dev/sdb3 pvdisplay/pvs 列出当前的物理卷 pvremo...

Linux_老吴 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部