`
DoubleEO
  • 浏览: 157791 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现股票的各种效果

阅读更多
<!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实现股票数据翻牌效果

    以上就是使用jQuery实现股票数据翻牌效果的完整流程。这个例子还可以扩展为更复杂的消息滚动提示信息展示,只需要调整HTML结构和CSS样式,同时处理更多数据项的翻转效果即可。通过这种方式,我们可以创建出既美观又...

    效果非常好的jQuery数字显示效果

    jQuery实现这样的效果,主要依赖于它的动画API和自定义事件。例如,可以使用`.animate()`函数来平滑地改变数字,通过修改DOM元素的CSS属性(如`font-size`、`opacity`)来实现数字的动态显示。同时,结合时间函数...

    AJAX(jquery)模拟股票涨跌实时显示功能

    总结来说,使用 AJAX 和 jQuery 模拟股票实时显示功能,涉及到前端与后端的数据交互、JSON 数据解析、DOM 操作以及可能的 UI 效果实现。这是一种常见的 web 开发技巧,有助于提升用户体验,避免页面频繁刷新。通过...

    jQuery实现数字滚动

    "jQuery实现数字滚动"是一种常见的动态展示技术,尤其适用于展示实时更新的数据,如访问量、股票价格或天气预报等。jQuery,作为一款强大的JavaScript库,提供了丰富的API和插件来简化网页交互的实现,包括数字滚动...

    经典jquery案例 经典jquery

    最后,"div实现jquery动态滑动效果"是jQuery动画效果的典型应用。例如,我们可以使用`.animate()`方法来平滑移动、改变大小或透明度等,创建出滑动门、轮播图等效果。同时,可以结合CSS3属性增强动画性能和视觉效果...

    jquery动态数字增加

    实现这个效果,首先需要理解jQuery的基本用法。jQuery的核心是选择器,它允许我们高效地定位DOM元素。例如,`$("#myNumber")`会选择ID为"myNumber"的元素。接着,我们可以使用`.html()`或`.text()`方法来改变元素内...

    jQuery自定义数字滚动效果代码

    本教程将深入讲解如何利用jQuery实现自定义的数字滚动效果,这种效果通常用于显示实时更新的数据,如股票价格、计数器或投票结果。 首先,我们来理解"数字滚动效果"。这种效果是指数字在页面上以动态滚动的方式进行...

    2017最新jQuery股票基金交易多个选项卡tab切换效果源码下载

    这篇内容将深入讲解jQuery实现股票基金交易多个选项卡切换效果的相关知识点。 首先,jQuery选项卡是一种用于组织和展示网页内容的有效方式,它允许用户在不同的面板之间轻松切换,每个面板通常包含不同的信息或功能...

    jquery 图表插件可编辑表格生成走势图jquery 图表统计

    首先,jQuery图表插件是用于在网页上创建各种可视化数据的工具,它们可以将复杂的数据转化为易于理解的图形,如柱状图、饼图、线图等。这些插件通常提供了丰富的定制选项,包括颜色、大小、动画效果等,以便用户根据...

    基于jQuery实现的开源框架,只支持HTML5.zip

    基于jQuery实现的开源框架,如本压缩包中的“JgUI”,是为了解决开发者在构建网页应用时遇到的复杂性和效率问题。jQuery通过提供易用的API,使得开发者能够快速地编写出功能丰富的网页应用,尤其对于新手来说,学习...

    jquery各种统计图

    在"jquery各种统计图"这个主题中,我们主要关注的是使用jQuery来展示数据的可视化方法,特别是饼状图、线条图和折线图。这些图表在数据分析、报告展示以及用户界面设计中非常常见,能够帮助用户直观理解复杂的数据。...

    jQuery实现的鼠标滚动页面数字就变化的动画特效源码.zip

    总的来说,这个jQuery实现的数字滚动动画特效源码是一个典型的前端开发示例,它展示了如何巧妙地结合jQuery的事件处理和动画功能,以实现动态且引人入胜的用户体验。通过学习和理解这段代码,开发者能够提升自己的...

    jquery写的走势图

    通过使用jQuery,开发者可以以更少的代码实现更复杂的网页动态效果。 二、K线图概念 K线图(也称为日本蜡烛图)是股票、期货市场中常用的一种技术分析工具,由开盘价、收盘价、最高价和最低价四个数据绘制而成。K线...

    jQuery自定义数值数字滚动代码

    这种效果通过JavaScript库jQuery实现,它能赋予网页元素丰富的交互性和动态视觉吸引力。 在jQuery中,实现数字滚动通常涉及到几个关键步骤: 1. **设置初始值**:首先,你需要在HTML中定义一个元素,用于显示滚动...

    AJAX学习总结(八)---Jquery实例:动态股票价格

    在这个JqueryTrain项目中,可能包含了一个简单的HTML页面和对应的JavaScript代码,用于演示如何使用jQuery实现动态股票价格的展示。通过学习这个实例,你可以更好地理解AJAX与jQuery的结合在实际应用中的效果,以及...

    资源包包含jQuery的各种网页.zip

    文件列表中的“答题系统设计论文.doc”可能包含了一个基于jQuery实现的在线测试系统的讨论,讲解了如何利用jQuery处理用户提交的答案、验证答案正确性以及显示得分等功能。“自习室预约”可能是一个使用jQuery处理...

    jQuery学习记录----股票信息实时显示(七)

    在本篇博客“jQuery学习记录----股票信息实时显示(七)”中,作者分享了如何使用jQuery技术来实现股票信息的实时更新展示。这涉及到Web开发中的动态数据获取和前端界面交互,是JavaScript库jQuery的一个实际应用...

    jquery实现的鼠标滚动调整设置input表格表单内容的特效源码.zip

    本资源"jquery实现的鼠标滚动调整设置input表格表单内容的特效源码.zip"显然是一个利用jQuery来创建特定交互效果的代码示例,特别是涉及到表格和输入框(input)的内容调整。下面我们将详细探讨这个主题。 首先,...

    jquery数字跳动插件Animate Number.zip

    在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化而设计的工具,它为开发者提供了更加灵活和丰富...

    jquery统计图

    为了实现这些图表,jQuery统计图可能利用了如Chart.js、Highcharts或Flot等JavaScript图表库。这些库提供了丰富的API和配置选项,允许开发者自定义颜色、标签、轴刻度、图例等,以满足项目的特定需求。 在压缩包...

Global site tag (gtag.js) - Google Analytics