标签：绑定 change add 数据 hidden border ice ack no-repeat
效果如下：
代码如下：
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} ];
标签：绑定 change add 数据 hidden border ice ack no-repeat
原文地址：https://www.cnblogs.com/yanggeng/p/10924866.html
