<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动态股票信息</title>
<link type="text/css" rel="stylesheet" href="css/edit.css">
<script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jslib/jqueryStock.js"></script>
</head>
<body>
<div id="300001"><a href="JQueryStock.html#">上证指数</a><span></span></div>
<div id="000001"><a href="JQueryStock.html#">浦发银行</a><span></span></div>
<div id="stock">
<div id="yes">昨收:<span></span></div>
<div id="tod">今开:<span></span></div>
<div id="now">当前:<span></span></div>
</div>
</body>
</html>
var obj;
var sid;
$(function() {
var stockNode = $("#stock").css("border", "1px solid black")
.width("150px").css("position", "absolute").css("z-index", "99")
.css("background-color", "blue").css("color", "yellow");
stockNode.hide();
var as = $("a");
as.mouseover(function(event) {
var aNode = $(this);
var divNode = aNode.parent();
sid = divNode.attr("id");
updatediv();
//控制弹出框的位置
/*//1.找到当前链接的位置
var offset = aNode.offset();
//2.设置弹出框的位置
stockNode.css("left", offset.left + "px").css("top", offset.top + aNode.height() + "px");*/
//出现在鼠标的右下方
stockNode.css("left",event.clientX + 5 + "px").css("top", event.clientY + 5 + "px");
stockNode.show();
});
as.mouseout(function() {
stockNode.hide();
});
getInfo();
setInterval(getInfo, 1000);
});
function getInfo() {
$.get("GetStockInfo", null, function(data) {
//接收并解析json数据
obj = eval(data);
var szzs = obj["300001"];
var pfyh = obj["000001"];
/* for(var sotckid in obj){
var stock = obj[stockid];
}*/
var szspan = $("#300001").children("span");
szspan.html(szzs.now);
if (szzs.now > szzs.yes) {
szspan.css("color", "red");
} else {
szspan.css("color", "green");
}
var pfspan = $("#000001").children("span");
pfspan.html(pfyh.now);
if (pfyh.now > pfyh.yes) {
pfspan.css("color", "red");
} else {
pfspan.css("color", "green");
}
updatediv();
})
}
function updatediv() {
var stockobj = obj[sid];
for (var proname in stockobj) {
if (proname != "name") {
$("#" + proname).children("span").html(stockobj[proname]);
}
}
}
分享到:
相关推荐
以上就是使用jQuery实现股票数据翻牌效果的完整流程。这个例子还可以扩展为更复杂的消息滚动提示信息展示,只需要调整HTML结构和CSS样式,同时处理更多数据项的翻转效果即可。通过这种方式,我们可以创建出既美观又...
jQuery实现这样的效果,主要依赖于它的动画API和自定义事件。例如,可以使用`.animate()`函数来平滑地改变数字,通过修改DOM元素的CSS属性(如`font-size`、`opacity`)来实现数字的动态显示。同时,结合时间函数...
总结来说,使用 AJAX 和 jQuery 模拟股票实时显示功能,涉及到前端与后端的数据交互、JSON 数据解析、DOM 操作以及可能的 UI 效果实现。这是一种常见的 web 开发技巧,有助于提升用户体验,避免页面频繁刷新。通过...
"jQuery实现数字滚动"是一种常见的动态展示技术,尤其适用于展示实时更新的数据,如访问量、股票价格或天气预报等。jQuery,作为一款强大的JavaScript库,提供了丰富的API和插件来简化网页交互的实现,包括数字滚动...
最后,"div实现jquery动态滑动效果"是jQuery动画效果的典型应用。例如,我们可以使用`.animate()`方法来平滑移动、改变大小或透明度等,创建出滑动门、轮播图等效果。同时,可以结合CSS3属性增强动画性能和视觉效果...
实现这个效果,首先需要理解jQuery的基本用法。jQuery的核心是选择器,它允许我们高效地定位DOM元素。例如,`$("#myNumber")`会选择ID为"myNumber"的元素。接着,我们可以使用`.html()`或`.text()`方法来改变元素内...
本教程将深入讲解如何利用jQuery实现自定义的数字滚动效果,这种效果通常用于显示实时更新的数据,如股票价格、计数器或投票结果。 首先,我们来理解"数字滚动效果"。这种效果是指数字在页面上以动态滚动的方式进行...
这篇内容将深入讲解jQuery实现股票基金交易多个选项卡切换效果的相关知识点。 首先,jQuery选项卡是一种用于组织和展示网页内容的有效方式,它允许用户在不同的面板之间轻松切换,每个面板通常包含不同的信息或功能...
首先,jQuery图表插件是用于在网页上创建各种可视化数据的工具,它们可以将复杂的数据转化为易于理解的图形,如柱状图、饼图、线图等。这些插件通常提供了丰富的定制选项,包括颜色、大小、动画效果等,以便用户根据...
基于jQuery实现的开源框架,如本压缩包中的“JgUI”,是为了解决开发者在构建网页应用时遇到的复杂性和效率问题。jQuery通过提供易用的API,使得开发者能够快速地编写出功能丰富的网页应用,尤其对于新手来说,学习...
在"jquery各种统计图"这个主题中,我们主要关注的是使用jQuery来展示数据的可视化方法,特别是饼状图、线条图和折线图。这些图表在数据分析、报告展示以及用户界面设计中非常常见,能够帮助用户直观理解复杂的数据。...
总的来说,这个jQuery实现的数字滚动动画特效源码是一个典型的前端开发示例,它展示了如何巧妙地结合jQuery的事件处理和动画功能,以实现动态且引人入胜的用户体验。通过学习和理解这段代码,开发者能够提升自己的...
通过使用jQuery,开发者可以以更少的代码实现更复杂的网页动态效果。 二、K线图概念 K线图(也称为日本蜡烛图)是股票、期货市场中常用的一种技术分析工具,由开盘价、收盘价、最高价和最低价四个数据绘制而成。K线...
这种效果通过JavaScript库jQuery实现,它能赋予网页元素丰富的交互性和动态视觉吸引力。 在jQuery中,实现数字滚动通常涉及到几个关键步骤: 1. **设置初始值**:首先,你需要在HTML中定义一个元素,用于显示滚动...
在这个JqueryTrain项目中,可能包含了一个简单的HTML页面和对应的JavaScript代码,用于演示如何使用jQuery实现动态股票价格的展示。通过学习这个实例,你可以更好地理解AJAX与jQuery的结合在实际应用中的效果,以及...
文件列表中的“答题系统设计论文.doc”可能包含了一个基于jQuery实现的在线测试系统的讨论,讲解了如何利用jQuery处理用户提交的答案、验证答案正确性以及显示得分等功能。“自习室预约”可能是一个使用jQuery处理...
在本篇博客“jQuery学习记录----股票信息实时显示(七)”中,作者分享了如何使用jQuery技术来实现股票信息的实时更新展示。这涉及到Web开发中的动态数据获取和前端界面交互,是JavaScript库jQuery的一个实际应用...
本资源"jquery实现的鼠标滚动调整设置input表格表单内容的特效源码.zip"显然是一个利用jQuery来创建特定交互效果的代码示例,特别是涉及到表格和输入框(input)的内容调整。下面我们将详细探讨这个主题。 首先,...
在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化而设计的工具,它为开发者提供了更加灵活和丰富...
为了实现这些图表,jQuery统计图可能利用了如Chart.js、Highcharts或Flot等JavaScript图表库。这些库提供了丰富的API和配置选项,允许开发者自定义颜色、标签、轴刻度、图例等,以满足项目的特定需求。 在压缩包...