文档章节

一个网页动态框的实现

阿采
 阿采
发布于 2015/12/10 16:02
字数 361
阅读 62
收藏 5

小需求:能在一个网页上鼠标点击一下,就在鼠标点击处浮现一个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
博文 40
码字总数 20837
作品 0
浦东
后端工程师
WEB 2.0 启发式爬虫实战|阿里云猪猪侠

6月21日,一则刑事判决书出现在大众眼里,其中几位被告人用爬虫抓取服务器内容,一审判决认为他们触犯了《刑法》第 285 条”非法获取计算机信息系统数据罪”,判处有期徒刑和罚金XXX。(点这...

又田
06/26
0
0
库房管理系统之遮罩锁屏

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

weienjun
2017/11/24
0
0
javascript常用函数大全 + javascript事半功倍/速成系列 + javascript技巧

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

a125138
2012/07/28
0
0
非常实用的12 个 jQuery 代码片段

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

_小狼狗
2015/11/09
0
0
JavaScript的基本使用

一、JavaScript的简单介绍   JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaS...

码农47
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取整除法

python3.6 中取整除法运算逻辑如下: d 非零,那么商 q 满足这样的关系: a = qd + r ,且0 ≤ r n1=7//3#7 = 3*2 +1n2=-6.1//3#-7 = 3*(-3)+2'{},{}'.format(n1,n2) 从运行结果可以...

colinux
28分钟前
3
0
阶段总结——用虚拟机搭建一个高可用负载均衡集群架构

[toc] linux基本知识已经介绍完,现有一个业务需要操作,通过对这个项目的操作,可以复习、总结、巩固之前的知识点; ** 用13台虚拟机搭建一个高可用负载均衡集群架构出来,并运行三个站点,...

feng-01
31分钟前
0
0
mysql 设置utf8字符集 (CentOS)

1.查看数据库及mysql应用目前使用的编码方式 (1)链接mysql 客户端 (2)执行:status 结果: 2.修改mysql 应用的字符编码(server characterset ) (1)打开配置文件:vim /etc/mysql/my...

qimh
31分钟前
0
0
windows无法格式化u盘解决方法

1。点开始-运行-输入cmd-format f: /fs: fat32 (这里f:是指U盘所在盘符) 这个格式化会很慢 请耐心等待

大灰狼wow
43分钟前
0
0
MySql 8.0连接失败

原来,MySql 8.0.11 换了新的身份验证插件(caching_sha2_password), 原来的身份验证插件为(mysql_native_password)。而客户端工具Navicat Premium12 中找不到新的身份验证插件(caching_s...

放飞E梦想O
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部