去年的时候了解学习了一下zeptojs，因为是移动js框架嘛还是必须要学习下的，里面封装的方法和jquery很类似，但是底层原理当然是不同的，这里展示的就是一个跑马灯效果，直接上代码和效果图：
样式不怎么好看，在手机端上运行还是可以跑的，可以试试，主要的是贴代码，分享一下效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <title>神牛步行3-跑马灯-效果</title> 8 <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> 9 10 11 <style type="text/css"> 12 .bs-glyphicons .glyphicon-class { 13 display: block; 14 text-align: center; 15 word-wrap: break-word; 16 } 17 18 * { 19 -webkit-box-sizing: border-box; 20 -moz-box-sizing: border-box; 21 box-sizing: border-box; 22 } 23 24 .bs-glyphicons li { 25 width: 12.5%; 26 font-size: 12px; 27 } 28 29 .bs-glyphicons li { 30 float: left; 31 width: 20%; 32 height: 115px; 33 padding: 10px; 34 font-size: 10px; 35 line-height: 1.4; 36 text-align: center; 37 background-color: #f9f9f9; 38 border: 1px solid #fff; 39 } 40 41 /*.bs-glyphicons li:hover { 42 color: #fff; 43 background-color: #563d7c; 44 }*/ 45 46 .loop { 47 color: #fff; 48 background-color: #563d7c; 49 } 50 51 li { 52 display: list-item; 53 text-align: -webkit-match-parent; 54 } 55 56 .bs-glyphicons-list { 57 padding-left: 0; 58 list-style: none; 59 } 60 61 ul, menu, dir { 62 display: block; 63 list-style-type: disc; 64 -webkit-margin-before: 1em; 65 -webkit-margin-after: 1em; 66 -webkit-margin-start: 0px; 67 -webkit-margin-end: 0px; 68 -webkit-padding-start: 40px; 69 } 70 71 .defBg { 72 width: 100%; 73 height: 100%; 74 } 75 </style> 76 </head> 77 <body> 78 79 <div class=" container"> 80 <div class="text-center"> 81 <span>每行格子数：</span> 82 <select id="selGZ" title="每行格子数"> 83 <option value="5">5</option> 84 <option value="7">7</option> 85 <option value="9">9</option> 86 <option value="11">11</option> 87 </select> 88 </div> 89 <div class="bs-glyphicons"> 90 <ul class="bs-glyphicons-list" id="ulShow"></ul> 91 </div> 92 </div> 93 </body> 94 </html> 95 <!-- 96 1 1 1 1 1 1 1 1 1 97 1 1 1 1 1 1 98 1 1 1 1 1 99 1 1 1 1 100 --> 101 <script src="zepto.js"></script> 102 <script type="text/javascript"> 103 104 //自动生成规格 105 var xmd = function (options) { 106 107 var defOptions = { 108 109 id: "", //要显示区域的Id 110 colsSize: 5, //列数量 自动计算每个格子宽度（注：奇数时最好） 111 gzName: [], //每个宫格的title信息 如果数组数量少于总格，剩余的显示无奖品;多余的将不显示 （注：显示的格子数量公式为 (colsSize - 2) * 4 + 4） 112 gzBgImg: [], //每个宫格的背景图片(无默认背景色) 113 defTitle: "放假一天", //默认奖品 114 defBg: "放假一天，真欢乐", //默认奖品对应的图片，没有好看的图片展示弄成文字，如需要图片替换即可 <img class='defBg' src='shopping.jpg'/> 115 speed: 1000 //单位秒 116 }; 117 118 //格式化{0} 119 var fomart = function (str, arr) { 120 121 for (var i = 0; i < arr.length; i++) { 122 123 str = str.replace("{" + i + "}", arr[i]); 124 } 125 return str; 126 } 127 128 //获取数组信息 129 var getArr = function (arr, index, defReturn) { 130 131 if (arr.length <= index) { return defReturn; } 132 133 return arr[index]; 134 } 135 136 //属性合并（一般写插件都需要） 137 $.extend(defOptions, options); 138 139 //生成样式 140 console.log(defOptions.colsSize); 141 if (defOptions.colsSize < 4) { return "<li style='background-color:white'>必须大于3列！</li>" } 142 if (defOptions.speed < 50) { return "<li style='background-color:white'>跑动速度应该在50以上！</li>" } 143 144 var tab = []; 145 var count = defOptions.colsSize * defOptions.colsSize; 146 var midoleVal = Math.ceil(defOptions.colsSize / 2); //中间值 147 var loop = 0; 148 var w = 100 / defOptions.colsSize; //li宽度 149 console.log(w); 150 var firstStyle = '<li style="width: ' + w + '%;" id="li_{0}" title="{1}">{2}</li>'; //边缘样式 151 var secondStyle = "<li style='background-color:white;width: " + w + "%;'></li>"; //中间样式 152 var threeStyle = "<li id='liShow' title='选中物品区域' style='line-height:100px; font-size:larger;width: " + w + "%;'>选中物品区域</li>"; //展示选中物品样式 153 var fourStyle = "<li style='background-color:white;width: " + w + "%; '><button id='btnStart' class='btn btn-default'>奔跑</button></li>"; //按钮区域 154 var j = 1; 155 var totalCount = (defOptions.colsSize - 2) * 4 + 4; //显示总的格子数 156 var leftColRecord = 0; //左边列记录数 157 var bottomColRecord = defOptions.colsSize - 1; //底边列记录数 158 159 for (var i = 0; i < count ; i++) { 160 161 162 if (i < defOptions.colsSize) { //头部 163 164 var title = getArr(defOptions.gzName, j - 1, defOptions.defTitle); 165 var bg = getArr(defOptions.gzBgImg, j - 1, title); 166 if (bg.indexOf(".") >= 0) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } 167 168 tab.push(fomart(firstStyle, [j.toString(), title, bg])); j++; 169 } else if (i >= count - defOptions.colsSize) { //尾部 170 171 var index = j + bottomColRecord; 172 var title = getArr(defOptions.gzName, index - 1, defOptions.defTitle); 173 var bg = getArr(defOptions.gzBgImg, index - 1, title); 174 if (bg.indexOf(".") >= 0) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } 175 176 tab.push(fomart(firstStyle, [index.toString(), title, bg])); 177 bottomColRecord--; 178 } else { //中间 179 180 if (i % defOptions.colsSize == 0) { //第一列 181 182 var index = totalCount - leftColRecord; 183 var title = getArr(defOptions.gzName, index - 1, defOptions.defTitle); 184 var bg = getArr(defOptions.gzBgImg, index - 1, title); 185 if (bg.indexOf(".") >= 0) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } 186 187 tab.push(fomart(firstStyle, [index.toString(), title, bg])); 188 leftColRecord++; 189 } else if ((i + 1) % defOptions.colsSize == 0) { //最后一列 190 191 var index = j; 192 var title = getArr(defOptions.gzName, index - 1, defOptions.defTitle); 193 var bg = getArr(defOptions.gzBgImg, index - 1, title); 194 if (bg.indexOf(".") >= 0) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } 195 196 tab.push(fomart(firstStyle, [index.toString(), title, bg])); j++; 197 } else { 198 199 if ((i + midoleVal) % defOptions.colsSize == 0 && loop == 1 && i > count - 2 * defOptions.colsSize) { tab.push(fourStyle); loop++ } //按钮 200 else if ((i + midoleVal) % defOptions.colsSize == 0 && loop == 0 && i > count - 3 * defOptions.colsSize) { tab.push(threeStyle); loop++ } //如果最中间的增加id，方便选中后展示信息 201 else { tab.push(secondStyle); } //空白信息 202 } 203 } 204 205 } 206 //显示样式到页面 207 $("#" + defOptions.id).html(tab.join('')); 208 209 //跑起来 210 var interval = null; 211 var go_i = 1; 212 var go = function () { 213 214 215 interval = setInterval(function () { 216 //console.log(defOptions.speed); 217 //初始化背景 218 for (var ii = 1; ii <= totalCount; ii++) { 219 $("#li_" + ii).css("background-color", "#f9f9f9"); 220 } 221 222 //对当前选中的添加样式 223 $("#li_" + go_i).css("background-color", "#563d7c"); 224 $("#liShow").html($("#li_" + go_i).attr("title")); 225 go_i++; 226 227 if (go_i > totalCount) { go_i = 1; } 228 }, defOptions.speed); 229 } 230 231 //绑定开始事件 232 var slow = null; 233 var btn = $("button[id='btnStart']"); 234 var orgSpeed = defOptions.speed; 235 btn.on("click", function () { 236 237 if (interval != null) { 238 239 if (slow != null) { return; } 240 //开始减速-停止 241 var stopVal = defOptions.speed * 5; //时间大于1.2倍后停止 242 console.log(stopVal); 243 slow = setInterval(function () { 244 245 defOptions.speed += orgSpeed / 2; 246 if (defOptions.speed >= stopVal) { 247 btn.html("奔跑"); 248 if (interval != null) { clearInterval(interval); interval = null; } 249 clearInterval(slow); 250 slow = null; 251 252 } else { 253 if (interval != null) { clearInterval(interval); interval = null; } 254 go(); 255 } 256 }, 500); 257 258 btn.html("减速"); 259 } else { 260 defOptions.speed = orgSpeed; 261 btn.html("停止"); 262 go_i = 1; 263 go(); 264 } 265 }); 266 } 267 268 $(function () { 269 270 //初始化跑马灯配置 271 var option = { 272 id: "ulShow", 273 gzName: ["香蕉", "苹果", "手榴弹", "西瓜", "葡萄", "瓜子", "梨子", "樱桃", "钞票", "番茄"], 274 gzBgImg: ["香蕉.jpg", "苹果.jpg"], 275 speed: 100, 276 colsSize: 5 277 }; 278 xmd(option); 279 280 $("#selGZ").on("change", function () { 281 282 var selVal = $(this).val(); 283 option.colsSize = selVal; 284 xmd(option); 285 }); 286 }) 287 </script>
效果访问地址：http://7xn3fx.com1.z0.glb.clouddn.com/跑马灯.html