现在位置首页 / 前端开发 /正文

Jquery仿百度风云榜数据对比效果--采用插件jscrollbar

作者: IT小兵 | 2014年2月12日| 热度:℃ | 评论: |参与:

先给大家看一个百度风云榜的数据对比效果。

参考地址:人群风向标--百度搜索风云榜


http://top.baidu.com/population


在当前的一个项目中,也有类似的需求:多类数据需要进行对比,并能够体现上升下降的趋势。

所以,就参考 百度搜索风云榜 做了一个demo。

demo演示地址:

百度风云榜对比效果

http://www.suchso.com/Itlife/test/BaiduTopDataCompare/BaiduTop.html 

 

Demo下载地址:

http://pan.baidu.com/s/1eQqWMaQ 


该demo使用了jquery.jscrollBar,是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件。

这里有详细的介绍:

基于jQuery的滚动条插件-jquery.jscrollbar-使用说明 - 前端编程 - IT工作生活这点事。Just Such So!

http://www.suchso.com/UIweb/jquery-jscrollbar-div-scrollbar.html 

首先说明一下思路:

  1. 目前项目使用的js都是基于jquery框架的。因此,入手做这个demo的时候,首先google了是否存在这样的插件(几乎不可能有)

  2. 转变一下思路:将这个功能分拆一下,实际是3个数据列表,进行联动。当其中一个数据发生改变(鼠标进入时的数据),其他数据进行匹配,

    是否存在相同的数据,存在则高亮,并展示出来。

  3. 基于2的思路,这样需要有一个支持div产生滚动条,并可以定位的插件。这里使用的是:jquery.jscrollbar

  4. css样式:这个由美工提供。


基于上述思路+jquery.jscrollbar,实现起来就比较简单了。

Html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>百度风云榜对比效果</title>
    <link href="theme/css/main.css" rel="stylesheet" />
</head>
<body >
    <div id="wapper">
        <div id="content">
            <div class="content_center">
                <div class="permanent_residence"> 
                    <div class="permanent_residence_list_wap">
                        <ul class="permanent_residence_list">
                            <li class="current">测试1</li>
                            <li>测试2</li>
                            <li>测试3</li>
                        </ul>
                        <div class="pr_tab_list_tab" id="divAllMonthData">
                        </div>
                        <!--end pr_tab_list_tab-->
                    </div>
                    <!--end permanent_residence_list_wap-->
                </div>
                <!--end permanent_residence-->
            </div>
        </div>
        <!--end content-->
    </div>
    <script src="js/require/jquery-1.8.1.min.js"></script>
    <script src="js/require/jquery.jqdrag-1.0.min.js"></script>
    <script src="js/require/jquery.mousewheel.min.js"></script>
    <script src="js/require/jquery.jscrollbar-1.0.2.src.js"></script>
    <script src="js/BaiDuTop.js"></script>
</body>
</html>

这里注意需要引用:

    <script src="js/require/jquery-1.8.1.min.js"></script>

    <script src="js/require/jquery.jqdrag-1.0.min.js"></script>

    <script src="js/require/jquery.mousewheel.min.js"></script>

    <script src="js/require/jquery.jscrollbar-1.0.2.src.js"></script>

BaiDuTop.js是自定义的js。

JavaScript:

 
$(document).ready(function () { 
    var month1 = GetMonthDataDiv(null, "2013-4",10);
    var month2 = GetMonthDataDiv(null, "2013-5",18);
    var month3 = GetMonthDataDiv(null, "2013-6", 22);
    var month4 = GetMonthDataDiv(null, "2013-7", 30);
    var divAllMonthData = $("#divAllMonthData");
    divAllMonthData.append(month1);
    divAllMonthData.append(month2);
    divAllMonthData.append(month3);
    divAllMonthData.append(month4);
     var listmonth = new Array();
    listmonth.push("div__" + "2013-4");
    listmonth.push("div__" + "2013-5");
    listmonth.push("div__" + "2013-6");
    listmonth.push("div__" + "2013-7");
    LoadDivDrag(listmonth);
}); 
function LoadDivDrag(listmonth) {
    //循环设置事件。nnd。比较麻烦。
    $.each(listmonth, function (key, id) {
        $('#' + id + '').jscrollbar({
            width: 10,
            color: '#88c2e7',
            opacity: 0.8,
            position: 'inner',
            mouseScrollDirection: 'vertical' // 'vertical' | 'horizontal'
        });//设置当前的div事件。
        //然后设置其他div的事件
        var otherids = $.grep(listmonth, function (keyy, idd) { 
            return idd != id;
            
        });
        $('#' + id + ' li').mouseenter(function (e) { 
            var customid = $(this).attr("customid");
            //查找包含这个bts的那个div下的li。有的话,把他高亮出来,并设置到div中间。
            $('#' + id + ' li').removeClass("li_border3"); 
            $(this).addClass("li_border3");
            $.each(otherids, function (kedy, iddd) {
                var $vvva = $("#" + iddd + " li[customid='" + customid + "']");
                if ($vvva.length > 0) {
                    var direct = $vvva.attr("direct");
                    $("#" + iddd + "").jscrollbar('scrollTo', 'y', (direct) * 25 - (550 - 25) / 2);
                    $("#" + iddd + " li").removeClass("li_border3");
                    $vvva.addClass(" li_border3");
                }
                else {
                    $("#" + iddd + " li").removeClass("li_border3");
                } 
            });
          
        });
    });
   
} 
function GetMonthDataDiv(list, month,id) { 
    var temp = "  <div class=\"item_list_wap\" id=\"div__" + month + "\">  <ul class=\"item_list\">"; 
    var count = 0;
    for (var i = id; i < id+100; i++) {
        var tempvalue = "  <li customid=\""+i+"\" direct=\"" + count + "\" id=\"lili__" + month + "__" + i + "\" ><span class=\"item_list_place\">"
    + "suchso.com  " + i
    + "</span><span class=\"item_list_time\">" + "5级"
    + "</span><span class=\"item_list_frequency\">" + "800" + "</span></li>"
        temp = temp + tempvalue;
        count = count+1;
    }
    temp = temp + " </ul></div>";
    var monthdiv=" <div class=\"pr_tab_list\">	<div class=\"pr_tab_list_title\">"+month+"</div>";
    monthdiv=monthdiv+"  <div class=\"tab_box_list\">";
    monthdiv=monthdiv+"<div class=\"tab_box_tt\"><span class=\"tab_box_tt_place\">网站</span><span class=\"tab_box_tt_time\">级别</span><span class=\"tab_box_tt_frequency\">ip数</span></div>";
    monthdiv=monthdiv+temp+" </div> </div>"; 
    return monthdiv;
}

代码为demo代码,不是实际项目代码,很多地方不完善,请大家自行补充吧。

转发注明:IT分享 http://www.suchso.com  

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询