文档章节

一个网页动态框的实现

阿采
 阿采
发布于 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
0060 PHP代码嵌入到HTML网页当中

  前面2节课全部都是之前写过的程序重新用PHP编程语言来实现。   这节课开始学习如何使用PHP结合HTML网页来实现具体的动态数据网页。   学哥计划做一个学生分数管理功能的网页,首先来...

零基础学编程
10/08
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

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 入门 - 进阶篇(4)- REST访问(RestTemplate)

经常需要发送一个GET/POST请求到其他系统(REST API),通过JDK自带的HttpURLConnection、Apache HttpClient、Netty 4、OkHTTP 2/3都可以实现。 HttpClient的使用:http://rensanning.iteye.c...

onedotdot
11分钟前
1
0
Wi-Fi也有版本号了!

据Solidot消息,行业组织 Wi-Fi 联盟宣布当前的版本 Wi-Fi 802.11ac 重命名为 Wi-Fi 5,而下一个版本 802.11ax 重命名为 Wi-Fi 6,之前的版本 802.11n 改名为 Wi-Fi 4。 Wi-Fi 标准之前使用单...

linux-tao
12分钟前
1
0
项目经验不丰富、技术不突出的程序员怎么打动面试官?

前言 相信不少的程序员都有过类似的困惑:如果我没有大型的项目经历,也不能靠技术征服面试官,那我要怎么才能给面试官留下一个好印象呢? 按照本人的面试经验来说,面试主要看几点:项目经验...

Mamba1
23分钟前
2
0
MyBatis 源码分析----MyBatis 整体架构概要说明

MyBatis整体架构 MyBatis的整体架构分为三层1:基础支持层,2:核心处理层,3:接口层 1:基础支持层: 1-1反射模块: 该模块对Java 原生的反射进行了良好的封装,提供了更加简洁易用的API ,...

西瓜1994
29分钟前
6
0
如何让 J2Cache 在多种编程语言环境中使用

现在的系统是越来越复杂了,不仅仅是功能复杂,系统结构也非常复杂,而且经常在一个系统里包含几种不同语言编写的子系统。例如用 JavaScript 做前端开发、用 Java/PHP 等等做后端,C/C++/Go ...

红薯
30分钟前
40
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部