去年的时候了解学习了一下zeptojs，因为是移动js框架嘛还是必须要学习下的，里面封装的方法和jquery很类似，但是底层原理当然是不同的，这里展示的就是一个跑马灯效果，直接上代码和效果图： 样式不怎么好看，在手机端上运行还是可以跑的，可以试试，主要的是贴代码，分享一下效 ...
去年的时候了解学习了一下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="http://www.cnblogs.com///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 1100 -->101 <script src='/images/loading.gif' data-original="zepto.js"></script>102 <script type="text/javascript">103 104 //自动生成规格105 var xmd = function (options) {106 107 var defOptions = {108 109 id: "", //要显示区域的Id110 colsSize: 5, //列数量 自动计算每个格子宽度（注：奇数时最好）111 gzName: [], //每个宫格的title信息 如果数组数量少于总格，剩余的显示无奖品;多余的将不显示 （注：显示的格子数量公式为 (colsSize - 2) * 4 + 4）112 gzBgImg: [], //每个宫格的背景图片(无默认背景色)113 defTitle: "放假一天", //默认奖品114 defBg: "放假一天，真欢乐", //默认奖品对应的图片，没有好看的图片展示弄成文字，如需要图片替换即可 <img class='defBg' src='/images/loading.gif' data-original='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 color: #800000;">' + 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='/images/loading.gif' data-original='{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='/images/loading.gif' data-original='{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='/images/loading.gif' data-original='{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='/images/loading.gif' data-original='{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: 5277 };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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：zeptojs
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
