效果如下：

　　代码如下：

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7     <title>Document</title>

  8     <link rel="stylesheet" href="./css/css-comment.css">

  9     <style>

 10         a:active, a:hover{

 11             text-decoration: underline;

 12         }

 13         body{

 14             color: #000;

 15         }

 16         .wrapper{

 17             position:absolute;

 18             top: 150px;

 19             left: 50%;

 20             margin-left: -175px;

 21             border: 1px solid black;

 22             width: 351px;

 23         }

 24         .clearF::after{

 25             content: '';

 26             display: block;

 27             clear: both;

 28             overflow: hidden;

 29         }

 30         .wrapper .topSection{

 31             padding: 5px 7px 0px;

 32             height: 25px;

 33         }

 34         .wrapper .topSection .hot{

 35             font-weight: 700;

 36             font-size: 14px;

 37             color: #000;

 38             line-height: 25px;

 39         }

 40         .wrapper .topSection .change{

 41             float: right;

 42             cursor: pointer;

 43             line-height: 25px;

 44             color: #3196d9;

 45         }

 46         .wrapper .showSection{

 47             padding: 5px 7px;

 48         }

 49

 50         .wrapper .showSection li{

 51             height: 17px;

 52             line-height: 17px;

 53             padding: 5px 0 5px 0;

 54         }

 55

 56         .wrapper .showSection .number{

 57             display: inline-block;

 58             padding: 1px 0;

 59             color: #fff;

 60             width: 14px;

 61             line-height: 100%;

 62             font-size: 12px;

 63             text-align: center;

 64             background-color: #0483f4;

 65         }

 66         .wrapper .showSection .title{

 67             padding-left: 5px;

 68             font-size: 13px;

 69             color: #3045da;

 70         }

 71         .wrapper .showSection .mes{

 72             float: right;

 73         }

 74         .wrapper .showSection .mes::after{

 75             content: '';

 76             display: inline-block;

 77             width: 15px;

 78             height: 15px;

 79             background-size: 100% 100%;

 80             background-position-y: 2px;

 81             background-repeat: no-repeat;

 82         }

 83         .wrapper .showSection .mes.up::after{

 84             background-image: url('./img/up.png');

 85         }

 86         .wrapper .showSection .mes.down::after{

 87             background-image: url('./img/down.png');

 88         }

 89         .tpl{

 90             display: none;

 91         }

 92     </style>

 93 </head>

 94 <body>

 95     <div class="wrapper">

 96         <div class="topSection clearF">

 97             <span class="hot">搜索热点</span>

 98             <span class="change">换一换</span>

 99         </div>

100         <ul class="showSection">

101             <li class="tpl clearF">

102                 <span class="number">1</span>

103                 <a href="#" class="title">英停售华为5G手机</a>

104                 <span class="mes">1149万</span>

105             </li>

106         </ul>

107     </div>

108     <script src="./jquery/jquery.js"></script>

109     <script src="./js/serverData.js"></script>

110     <script>

111         (function(data){

112             var colorsArray = ['#f54545', '#ff8547', '#ffac38']; // 字体颜色

113             var wrapper = $('.wrapper');

114             var showSection = wrapper.find('.showSection');

115             var curPage = 0; //页数

116             var totalPage = Math.ceil( data.length / 10 );

117

118             showSection.hide();   //先隐藏， 后 淡出动画效果

119

120             function bindEvent(){ //绑定事件，点击后，页数 ++

121                 wrapper.find('.change').on('click',function(){

122                     curPage = ++curPage % totalPage;  // 利用数学计算，让每次点击后 ++  到4 的时候 变成 0

123                     renderPage(data) //点击后， 拿到新页数， 重新 渲染页面

124                 })

125             }

126             function renderPage(data){

127                 showSection.find('.tpl').nextAll().remove();   // 删除以前的结构。

128                 showSection.hide();

129

130                 var len = (data.length - curPage * 10) >= 10 ? 10 : data.length - curPage * 10;

131                 // ↑  计算后， 每次渲染的 数据为 10 条。 到了 第 3 页，要循环的 为 4 此而已。

132

133                 for(var i = 0; i < len; i ++){

134                     var cloneLi = showSection.find('.tpl').clone().removeClass('tpl'); //克隆，上面的html 作为模板

135                     var ele = data[i + curPage * 10];

136                     cloneLi.find('.number')

137                                 .text(i + curPage * 10 + 1)

138                                     .css('background', curPage == 0 && (colorsArray[i + curPage * 10 + 1] || '#0483f4'))

139                                         .next()

140                                             .text(ele.title)

141                                                 .next()

142                                                     .addClass(ele.search > ele.hisSearch ? 'up' : 'down');

143

144                     showSection.append(cloneLi);

145                     showSection.fadeIn();

146                 }

147             }

148             bindEvent();

149             renderPage(data);

150         })(data)

151     </script>

152 </body>

153 </html>

　　以下代码为测试 数据:

var data = [

    {title:'金星秀停播', search:47754, hisSearch:42884},

    {title:'8岁孩独自吃火锅', search:46731, hisSearch:41076},

    {title:'父亲开车撞死儿子', search:44950, hisSearch:47232},

    {title:'国足战胜乌兹别克', search:24954, hisSearch:23492},

    {title:'中国研发高速列车', search:11334, hisSearch:39224},

    {title:'狐狸被养成怪物', search:6134, hisSearch:4282},

    {title:'杨坤被骚扰发飙', search:5207, hisSearch:4342},

    {title:'陈冠希怒怼女主持', search:5204, hisSearch:9831},

    {title:'王俊凯室友曝光', search:4921, hisSearch:2832},

    {title:'中国海军击溃海盗', search:4351, hisSearch:8271},

    {title:'美团再遭举报', search:4293, hisSearch:9824},

    {title:'德国现巨型炸弹', search:2985, hisSearch:6823},

    {title:'七旬老太欠款8亿', search:2150, hisSearch:8901},

    {title:'南京现快递毒包裹', search:1929, hisSearch:1092},

    {title:'付辛博现身民政局', search:1791, hisSearch:1921},

    {title:'客人换衣被直播', search:1691, hisSearch:1428},

    {title:'北京现共享男友', search:1535, hisSearch:1021},

    {title:'彩色兵马俑展出', search:1417, hisSearch:1092},

    {title:'怕被盗携巨款旅游', search:1322, hisSearch:1921},

    {title:'何雯娜退役', search:1220, hisSearch:1901},

    {title:'指示孩子闹机场', search:1056, hisSearch:1026},

    {title:'一批新规9月实施', search:931, hisSearch:428},

    {title:'霍元甲玄孙女夺冠', search:850, hisSearch:987},

    {title:'姚刚被立案侦查', search:784, hisSearch:887},

    {title:'泰方全面搜捕英拉', search:682, hisSearch:287},

    {title:'中国游客泰国遭砍', search:601, hisSearch:427},

    {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465},

    {title:'台军演练用日军歌', search:525, hisSearch:799},

    {title:'印度医院儿童死亡', search:501, hisSearch:987},

    {title:'周杰伦开社交账号', search:468, hisSearch:989},

    {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465},

    {title:'台军演练用日军歌', search:525, hisSearch:799},

    {title:'印度医院儿童死亡', search:501, hisSearch:987},

    {title:'周杰伦开社交账号', search:468, hisSearch:989}

];

jQuery 小demo 热点排名的更多相关文章

  1. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  2. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  3. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  4. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  5. 入门Leaflet之小Demo

    入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...

  6. 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

    简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...

  7. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  8. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  9. Nancy之基于Self Hosting的补充小Demo

    前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...

随机推荐

  1. 渗透测试之nmap

    一,功能介绍 Nmap是网络连接端口扫描软件,用来扫描网上电脑开放的哪些连接端口,并且确定哪些服务运行在哪些端口连接,推断是哪个操作系统,他是网络管理员必备的软件之一,以及用于评估网络系统安全. 二, ...

  2. IDEA配置类和方法注释模板

    1定义java文件头部的注释 2给java类中的方法添加上注释 2.1第一步勾选Enable Live  Templates 2.2第二步新建一个Group 2.3第三步新建一个Template 2. ...

  3. lua table面向对象扩展

    一 .table扩展 -- 返回table大小 table.size = function(t) local count = 0 for _ in pairs(t) do count = count ...

  4. 【源码】spring生命周期

    一.spring生命周期 1. 实例化Bean 对于BeanFactory容器,当客户向容器请求一个尚未初始化的bean时,或初始化bean的时候需要注入另一个尚未初始化的依赖时,容器就会调用crea ...

  5. python获取汉字首字母

    获取汉字首字母 关注公众号"轻松学编程"了解更多. 应用场景之一:可用于获取名字首字母,在数据库中查询记录时,可以用它来排序输出. from pytz import unicode ...

  6. echarts legend 图例文字闪烁显示

    最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...

  7. LRU算法详解

    一.什么是 LRU 算法 就是一种缓存淘汰策略. 计算机的缓存容量有限,如果缓存满了就要删除一些内容,给新内容腾位置.但问题是,删除哪些内容呢?我们肯定希望删掉哪些没什么用的缓存,而把有用的数据继续留 ...

  8. vue脚手架项目搭建失败

    可能是ssl 的问题 解决办法: 1. npm config set strict-ssl false 2. npm install -g supervisor 以上完成后vue ui 或vue cr ...

  9. swjtuoj2433 Magic Mirror

    描述 Magic Mirror is an artificial intelligence system developed by TAL AI LAB,It can determine human ...

  10. 使用 Iceberg on Kubernetes 打造新一代云原生数据湖

    背景 大数据发展至今,按照 Google 2003年发布的<The Google File System>第一篇论文算起,已走过17个年头.可惜的是 Google 当时并没有开源其技术,& ...