效果如下：

　　代码如下：

  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. java 第一课 笔记

    java是一种解释型语言 Java提供了内存自动管理:不涉及指针:单继承. classpath:字节码文件的路径,执行java.exe时,会查找并解释*.class文件 set classpath=. ...

  2. RestTemplate+Ribbon实现服务调用

    一,通过LoadBalancerClient取得uri,然后RestTemplate 调用 1, 注入LoadBalancerClient @Autowired LoadBalancerClient ...

  3. php7.1安装openssl扩展

    1,进入到PHP源码目录中的ext中的openssl目录 2,phpize 3,./configure --with-openssl --with-php-config=/usr/local/php/ ...

  4. spring cloud oauth2 实现用户认证登录

    spring-cloud-oauth2 实现用户认证及单点登录 需求 ​ 在微服务架构中,我们有很多业务模块,每个模块都需要有用户认证,权限校验.有时候也会接入来自第三方厂商的应用.要求是只登录一次, ...

  5. django 连接 mysql数据库

    1.安装mysqlclient pip install mysqlclient 或 pycharm --> File --> settings --> Project: (项目名称) ...

  6. Java学习的第十一天

    1. 方法递归 2.this()不理解和类型传递不太理解 3.明天学习完第四章

  7. [BZOJ 2287/POJ openjudge1009/Luogu P4141] 消失之物

    题面: 传送门:http://poj.openjudge.cn/practice/1009/ Solution DP+DP 首先,我们可以很轻松地求出所有物品都要的情况下的选择方案数,一个简单的满背包 ...

  8. leetcode146 longest-substring-without-repeating-character

    题目描述 给定一个字符串,找出最长的不具有重复字符的子串的长度.例如,"abcabcbb"不具有重复字符的最长子串是"abc",长度为3.对于"bbb ...

  9. Azure Data Factory（四）集成 Logic App 的邮件通知提醒

    一,引言 上一篇有介绍到使用Azure Data Factory 复制数据,然后有集成 Azure DevOps 实现CI/CD,但是对于真正的项目来说,这些肯定是不够的,比如说在执行 Azure P ...

  10. ceph的pg平衡插件balancer

    前言 ceph比较老的版本使用的reweight或者osd weight来调整平衡的,本篇介绍的是ceph新的自带的插件balancer的使用,官网有比较详细的操作手册可以查询 使用方法 查询插件的开 ...