文档章节

一个网页动态框的实现

阿采
 阿采
发布于 2015/12/10 16:02
字数 361
阅读 63
收藏 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
浦东
后端工程师
私信 提问
几个非常实用的JQuery代码片段

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并...

IT智云编程
11/03
0
0
0060 PHP代码嵌入到HTML网页当中

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

零基础学编程
10/08
0
0
WEB 2.0 启发式爬虫实战|阿里云猪猪侠

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

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

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

weienjun
2017/11/24
0
0
Python全栈 Web(JavaScript DOM节点、事件)

1.查询节点 1.根据节点的层级查询节点 1.childNodes 元素节点,文本节点, 2.children 元素节点 3.parentNode 获取父节点 4.nextSibling 获取下一个兄弟节点 有可能是文本节点 5.nextElementS...

巴黎香榭
09/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[开源系统] springboot快速开发框架推荐

本期为大家精选了 码云 上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架、文件文档系统、秒杀系统、微服务化系统、后台管理系统等,希望能够给大家带来一点帮助:) 1、项目名称:...

MoksMo
10分钟前
0
0
深入解析Vue里函数的调用顺序介绍

今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 method用来定义方法的,比如你@cl...

前端攻城老湿
17分钟前
1
0
深入总结Javascript原型及原型链

本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 我们创建的每个函数都有一...

前端攻城小牛
19分钟前
1
0
千万级规模【高性能、高并发】互联网架构经验分享~

作者:Java关博 链接:http://blog.51cto.com/14049376/2329037?utm_source=tuicool&utm_medium=referral 架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙...

Java干货分享
20分钟前
0
0
缓存

并发情况下发生的缓存问题: 缓存一致性: 缓存穿透:是指在高并发场景下,如果某一个key被高并发的访问,缓存没有命中,出于容错性的考虑,会去数据库获取数据,从而导致大量请求访问数据库...

wuyiyi
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部