漂亮提示层根据鼠标定位显示层ajax调josn数据源码资源-CSDN文库

共5个文件

html：2个

gif：2个

js：1个

漂亮提示层

AJAX

josn

jQuery

源码

5星 · 超过95%的资源需积分: 10 31 浏览量 2012-07-22 19:46:54 上传评论收藏 33KB RAR 举报

在IT行业中，动态地展示信息以提供用户交互体验是至关重要的。这个名为“漂亮提示层根据鼠标定位显示层ajax调josn数据源码”的项目，就是一种实现这一目标的方法。这个实例利用了Ajax技术、JSON数据格式以及jQuery库，创建了一个高效且美观的提示层系统，能够在用户鼠标移动到特定位置时，动态加载并显示相关信息。我们来详细了解一下Ajax（Asynchronous JavaScript and XML）。Ajax并不是一种单一的技术，而是一种使用一组相关技术来创建异步Web应用的方法。在这个实例中，Ajax允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这提升了用户体验，因为用户可以即时看到信息，而无需等待整个页面刷新。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在这个项目中，JSON被用作数据源，存储着提示层要显示的信息。当用户触发事件时，通过Ajax调用，JavaScript会从服务器获取JSON数据，并将其解析成JavaScript对象，然后在提示层上呈现。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个实例中，jQuery插件被用来处理DOM操作、事件监听和Ajax请求。例如，jQuery的`.ajax()`方法可能被用来发起Ajax请求，`.on()`方法用于监听鼠标事件，而`.html()`或`.append()`方法则可能用于将获取的JSON数据插入到提示层中。提示层的设计和实现通常涉及到CSS样式和布局，以确保其既美观又实用。在这个案例中，提示层的位置是根据鼠标坐标动态计算的，这样可以确保提示信息总是在鼠标附近显示，提供良好的视觉体验。`text.html`文件很可能包含了提示层的基本结构和样式，而这些内容可以通过Ajax调用的JSON数据进行填充和更新。这个源码示例展示了如何结合Ajax、JSON和jQuery来创建一个交互式的提示层系统。开发者可以根据自己的需求调整和扩展这个系统，以适应各种应用场景，如产品介绍、帮助信息提示或者数据分析展示。这样的技术在现代Web开发中非常常见，对于提升网站的用户体验有着显著的作用。

资源推荐

资源详情

资源评论

收起资源包目录

鼠标显示层ajax调josn.rar （5个子文件）

鼠标显示层ajax调josn

jquery-1.6.2.min.js 89KB

text.html 167B

dome.html 3KB

img

2.gif 116B

1.gif 916B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>根据鼠标定位显示层读取josn信息</title> </head> <style> .msgbox{width:377px; font-size:12px; position:absolute; z-index:2} .msgbox ul,.msgbox ul li{margin:0px;padding:0px;} .msgbox .msgbg ul li{ list-style:none;} .msgbox .msgbg{background:url(img/1.gif) top no-repeat; width:357px; padding-left:20px; padding-top:10px; padding-bottom:10px;} .msgbox .msgbg label{color:#3e84bd; display:block; margin-bottom:5px;} .msgbox{background:url(img/2.gif) bottom no-repeat; padding-bottom:3px;} .dome{ font-size:12px; width:150PX;} .dome ul{margin:0px; padding:0px;} .dome ul li{list-style:none; position:relative;} .dome a{color:#3e84bd; text-decoration:none; display:block; height:30px;} .dome a:hover{ text-decoration:underline;} </style> <body> <div class="dome"> <ul> <li><a href="javascript:">海上的月亮</a> <div class="msgbox" style="display:none;"> <div class="msgbg"> <ul> </ul> </div> </div> </li> <li><a href="javascript:">这个世界</a> <div class="msgbox" style="display:none;"> <div class="msgbg"> <ul> </ul> </div> </div> </li> <li><a href="javascript:">呼唤</a> <div class="msgbox" style="display:none;"> <div class="msgbg"> <ul> </ul> </div> </div> </li> </ul> </div> </body> <script src="jquery-1.6.2.min.js"></script> <script> $(function(){ $(".dome").find("ul li").hover(function(e){ var o = $(".dome ul").find("li a").offset(); var k = $(this).find("a").width(); //模拟ajax josn数据 var url = "text.html"; var i =$(this).find("a").parent().index() ; var temp_html = "<li> "; $.getJSON(url,function(json){ $.each(json,function(){ temp_html ="<label>"+json[i].p+" - "+json[i].d+"</label><label>"+json[i].c+"</label><label>"+json[i].d+"</label>"; }); $(".msgbg").find("ul").html(temp_html); }); $(this).find(".msgbox").css({"top":0,"left":e.pageX}).show(); },function(){ $(this).find(".msgbox").hide(); }) }); </script>  </html>

评论收藏

内容反馈