去年的時候瞭解學習了一下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