<!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和配置选项，允许开发者自定义颜色、标签、轴刻度、图例等，以满足项目的特定需求。 在压缩包...