FED
/
lolbox.duowan.com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>英雄数据榜</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="css/global.css" />
  <style>
    body { height: 527px; overflow: hidden; }
  </style>
  <!--[if IE 7]>
    <style>
      .heroRankCrumbs .fnMenu{margin-top:-23px;}
      .sever-select i{margin: -17px 9px 0!important;}
    </style>
  <![endif]-->
  <!--[if gt IE 6]><!-->
    <script type="text/javascript">
    !function(t){t.loadScript(["http://szhuodong.duowan.com/feq/lolbox/yy-f2e-header-lolbox.min"])}(function(){function t(t){var e=n(t);document.write(e)}function n(t){for(var n,r="",c=0;n=t[c];c++)r+=e(n);return r}function e(t){var n=[unescape("%3Cscript%20type%3D%22text/javascript%22%20src%3D%22"),"",unescape("%22%3E%3C/script%3E")],e=new Date;return e.setSeconds(0),e.setMilliseconds(0),e=e.getTime(),t+="?t_="+e,n[1]=t,n.join("")}return{loadScript:function(n){n&&n.length&&n instanceof Array&&t(n)}}}())
    </script>
<!--<![endif]-->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/jquery.cookie.js" type="text/javascript"></script>
  <script src="js/heroesList.js" type="text/javascript"></script>
  <script>
    var IMAGE_URL = "http://img.lolbox.duowan.com"; 
  </script>
</head>
<body scroll="no" style="overflow:hidden;">
  <div class="heroRankCrumbs">
    <a href="playerSearch.html">战绩查询</a> &gt; 英雄胜率榜
    <div class="fnMenu">
      <a class="icons back" href="javascript:history.back();"><i></i></a>
      <a class="icons refresh" href="javascript:location.reload();"><i></i></a>
    </div>
  </div>
  <div class="box heroRanks-tc">
    <div class="box-bd">
      <div class="mod-tabs clearfix">
        <div class="mod-tabs-bd hero-rank">
          <div class="mod-tabs-content">
            <div class="hero-left fl">
              <div class="choose-type">
                <ul class="mod-tabs-trigger">
                  <li><a class="stat-sign" stat-sign="master" href="rankScoreRank.html" stat-desc="点击/排位高手榜">排位榜</a></li>
                  <li><a class="stat-sign" stat-sign="action list" href="zdlRank.html" stat-desc="点击/战斗力排行榜">战斗力榜</a></li>
                  <li class="selected"><a class="stat-sign" stat-sign="hero ace" href="heroesRank.html" stat-desc="点击/英雄高手榜">英雄玩家榜</a></li>
                </ul>
              </div>
              <div class="heros-content">
                <div class="common-heros">
                  <h3>玩家们常用英雄</h3>
                  <ul class="mod-pic" id="heroList"></ul>
                </div>
                <div class="heros-search">
                  <h3>搜索英雄</h3>
                  <div class="search-input video-search">
                      <input id="searchInput" class="text" type="text" value="搜索关键词,如”艾克“" onfocus="javascript:if(this.value=='搜索关键词,如”艾克“')this.value='';">
                      <i id="submitBtn"></i>
                  </div>
                  <div class="search-result">
                    <label>搜索结果：</label><span id="searchResult"></span>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="hero-right fr video">
              <div class="r-c">
                <div class="hd">
                  <h3>热门视频排行</h3>
                </div>
                <ul class="mod-art rankList"></ul>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <script id="heroListTemplate" type="text/template">
    <%_.each(data, function(item, i) {
      if(i >= 14) return;
      var displayName = item.display_name;
      var src = IMAGE_URL + "/champions/" + item.name + "_40x40.jpg";
      var href = "heroTop10Players.html?hero="+item.name;
    %>
        <li>
          <a href="<%=href%>">
              <img src="<%=src%>" alt="<%=displayName%> 点击查看相关比赛" title="<%=item.title%>">
          </a>
        </li>
    <%});%>
  </script>
  <script id="searchResultTemplate" type="text/template">
    <%_.each(data, function(item) {%>
        <a href="heroTop10Players.html?hero=<%=item.name%>"><%=item.title%>(<%=item.displayName%>)</a>
    <%});%>
  </script>
  <script type="text/template" id="rankListTemplate">
  <li><i class="num"></i><a target="_blank"></a></li>
  </script>
  <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/underscore.js"></script>
  <!--<script type="text/javascript" src="http://sz.duowan.com/s/ya/ya.1.3.1-min.js"></script>-->
  <!--<script src="js/new_stat.js"></script>-->
  <script>
  $(function() {
    var Heros = function() {
      this.$heroUl = $("#heroList");
      this.$heroList = $("#heroList");
      this.$submitBtn = $("#submitBtn");
      this.$searchInput = $("#searchInput");
      this.$searchResult = $("#searchResult");
      this.$searchResultTemplate = $("#searchResultTemplate");
      this.$heroListTemplate = $("#heroListTemplate");
      this.heroData = [];
      this.heroListData = this._translateToArray(heroesList);
      this.heroUrl = 'http://api.lolbox.duowan.com/api/v2/champion/popular/';
      this.videoRankUrl = 'http://lolbox.duowan.com/api/article/index.php?action=preview_jsonp&callback=cb';
    };

    Heros.prototype = {
      constructor: Heros,
      init: function() {
        var self = this;
        
        this._renderRankList();

        this.$submitBtn.on("click", function(e) {
          self._searchLogic(e);
        });
        
        this.$searchInput.keydown(function(e){
          if(e.which == 13){
            self._searchLogic(e);
          }
        });

        this._getHeroListData().done(function(resp) {
          var list = resp.champion_list;
          if(resp && list && list.length > 0) {
            self.heroData = list;
            self._renderHeroList();
          }
        });
      },
      _searchLogic: function(e) {
          e.preventDefault();
          var value = this.$searchInput.val();
          if(value.indexOf(",") != -1) return;
          var data = this._getFromHeroList(value);
          this._renderSearch(data);
      },
      _renderHeroList: function() {
        var template = _.template(this.$heroListTemplate.html());
        this.$heroList.html(template({data:this.heroData}));
      },
      _getFromHeroList: function(value) {
        var data = [];

        if(!value) {
          data = this.heroListData;
        } else {
          var hero = heroesList[value];
          if(hero != undefined) {
            data.push(hero);
          } else {
            for(var i=0,len=this.heroListData.length;i<len;i++) {
              var item = this.heroListData[i];
              if(item.name == value || item.displayName == value || item.title == value) {
                data.push(item);
                break;
              }
            }
          }
        }

        return data;
      },
      _translateToArray: function(data) {
        var temp = [];
        for(var key in data) {
          temp.push(data[key]);
        }

        return temp;
      },
      _renderSearch: function(data) {
        var template = _.template(this.$searchResultTemplate.html());
        this.$searchResult.html(template({data:data}));
      },
      _getHeroListData: function() {
        return $.ajax({
            url: this.heroUrl,
            dataType: 'jsonp'
        });
      },
      _getVideoRankData: function() {
        return $.ajax({
            url: this.videoRankUrl,
            dataType: 'jsonp',
            jsonpCallback: 'jQueryJsonp',
            jsonp: 'callback'
        });
      },
      _renderRankList: function(){
        this._getVideoRankData().done(function(data){
          var html = '';
          var template = $('#rankListTemplate').html();
          _.each(data.hot_video.slice(0, 8), function(item, key){
            var _tmp = $(template);
            _tmp.find('a').attr('href', item.url_source).text(item.title);
            _tmp.find('.num').text(++key);
            if(key == 1){
              _tmp.addClass('first');
            }

            html += _tmp[0].outerHTML;
          });
          $('.rankList').html(html);
        });
      }
    };

    new Heros().init();
  });
  </script>
  <!--海度统计-->
  <script type="text/javascript">_hiido_no=0;_hiido_wid=["lbox"];</script>
  <script src="http://www.duowan.com/duowan.js" type="text/javascript"></script>
  <!--百度统计-->
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?72772dda37b1e926733138415981abcf";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
  <!--[if gt IE 6]><!-->
    <script type="text/javascript">
        window.onerror = function(a,b,c){ return true};!function(t){t.loadScript(["http://szhuodong.duowan.com/feq/lolbox/yy-f2e-lolbox.min"])}(function(){function t(e,a){var n=a[e];if(n){e++;var o=document.createElement("script");o.type="text/javascript",o.setAttribute("async","async"),o.onload=o.onreadystatechange=function(){return o.readyState&&"complete"!==o.readyState&&"loaded"!==o.readyState?!1:(o.onload=o.onreadystatechange=null,void t(e,a))};var c=new Date;c.setSeconds(0),c.setMilliseconds(0),c=c.getTime(),o.async=!0,o.src=n+"?_="+c,document.getElementsByTagName("head")[0].appendChild(o)}}return{loadScript:function(e){e&&e.length&&e instanceof Array&&t(0,e)}}}());
    </script>
<!--<![endif]-->
</body>
</html>