去年的时候了解学习了一下zeptojs，因为是移动js框架嘛还是必须要学习下的，里面封装的方法和jquery很类似，但是底层原理当然是不同的，这里展示的就是一个跑马灯效果，直接上代码和效果图：
样式不怎么好看，在手机端上运行还是可以跑的，可以试试，主要的是贴代码，分享一下效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>神牛步行3-跑马灯-效果</title>
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> <style type="text/css">
.bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
word-wrap: break-word;
} * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} .bs-glyphicons li {
width: 12.5%;
font-size: 12px;
} .bs-glyphicons li {
float: left;
width: %;
height: 115px;
padding: 10px;
font-size: 10px;
line-height: 1.4;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #fff;
} /*.bs-glyphicons li:hover {
color: #fff;
background-color: #563d7c;
}*/ .loop {
color: #fff;
background-color: #563d7c;
} li {
display: list-item;
text-align: -webkit-match-parent;
} .bs-glyphicons-list {
padding-left: ;
list-style: none;
} ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
} .defBg {
width: %;
height: %;
}
</style>
</head>
<body> <div class=" container">
<div class="text-center">
<span>每行格子数：</span>
<select id="selGZ" title="每行格子数">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list" id="ulShow"></ul>
</div>
</div>
</body>
</html>
<!-- -->
<script src="zepto.js"></script>
<script type="text/javascript"> //自动生成规格
var xmd = function (options) { var defOptions = { id: "", //要显示区域的Id
colsSize: , //列数量 自动计算每个格子宽度（注：奇数时最好）
gzName: [], //每个宫格的title信息 如果数组数量少于总格，剩余的显示无奖品;多余的将不显示 （注：显示的格子数量公式为 (colsSize - 2) * 4 + 4）
gzBgImg: [], //每个宫格的背景图片(无默认背景色)
defTitle: "放假一天", //默认奖品
defBg: "放假一天，真欢乐", //默认奖品对应的图片，没有好看的图片展示弄成文字，如需要图片替换即可 <img class='defBg' src='shopping.jpg'/>
speed: //单位秒
}; //格式化{0}
var fomart = function (str, arr) { for (var i = ; i < arr.length; i++) { str = str.replace("{" + i + "}", arr[i]);
}
return str;
} //获取数组信息
var getArr = function (arr, index, defReturn) { if (arr.length <= index) { return defReturn; } return arr[index];
} //属性合并（一般写插件都需要）
$.extend(defOptions, options); //生成样式
console.log(defOptions.colsSize);
if (defOptions.colsSize < ) { return "<li style='background-color:white'>必须大于3列！</li>" }
if (defOptions.speed < ) { return "<li style='background-color:white'>跑动速度应该在50以上！</li>" } var tab = [];
var count = defOptions.colsSize * defOptions.colsSize;
var midoleVal = Math.ceil(defOptions.colsSize / ); //中间值
var loop = ;
var w = / defOptions.colsSize; //li宽度
console.log(w);
var firstStyle = '<li style="width: ' + w + '%;" id="li_{0}" title="{1}">{2}</li>'; //边缘样式
var secondStyle = "<li style='background-color:white;width: " + w + "%;'></li>"; //中间样式
var threeStyle = "<li id='liShow' title='选中物品区域' style='line-height:100px; font-size:larger;width: " + w + "%;'>选中物品区域</li>"; //展示选中物品样式
var fourStyle = "<li style='background-color:white;width: " + w + "%; '><button id='btnStart' class='btn btn-default'>奔跑</button></li>"; //按钮区域
var j = ;
var totalCount = (defOptions.colsSize - ) * + ; //显示总的格子数
var leftColRecord = ; //左边列记录数
var bottomColRecord = defOptions.colsSize - ; //底边列记录数 for (var i = ; i < count ; i++) { if (i < defOptions.colsSize) { //头部 var title = getArr(defOptions.gzName, j - , defOptions.defTitle);
var bg = getArr(defOptions.gzBgImg, j - , title);
if (bg.indexOf(".") >= ) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } tab.push(fomart(firstStyle, [j.toString(), title, bg])); j++;
} else if (i >= count - defOptions.colsSize) { //尾部 var index = j + bottomColRecord;
var title = getArr(defOptions.gzName, index - , defOptions.defTitle);
var bg = getArr(defOptions.gzBgImg, index - , title);
if (bg.indexOf(".") >= ) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } tab.push(fomart(firstStyle, [index.toString(), title, bg]));
bottomColRecord--;
} else { //中间 if (i % defOptions.colsSize == ) { //第一列 var index = totalCount - leftColRecord;
var title = getArr(defOptions.gzName, index - , defOptions.defTitle);
var bg = getArr(defOptions.gzBgImg, index - , title);
if (bg.indexOf(".") >= ) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } tab.push(fomart(firstStyle, [index.toString(), title, bg]));
leftColRecord++;
} else if ((i + ) % defOptions.colsSize == ) { //最后一列 var index = j;
var title = getArr(defOptions.gzName, index - , defOptions.defTitle);
var bg = getArr(defOptions.gzBgImg, index - , title);
if (bg.indexOf(".") >= ) { bg = fomart("<img class='defBg' src='{0}'/>", [bg]); } tab.push(fomart(firstStyle, [index.toString(), title, bg])); j++;
} else { if ((i + midoleVal) % defOptions.colsSize == && loop == && i > count - * defOptions.colsSize) { tab.push(fourStyle); loop++ } //按钮
else if ((i + midoleVal) % defOptions.colsSize == && loop == && i > count - * defOptions.colsSize) { tab.push(threeStyle); loop++ } //如果最中间的增加id，方便选中后展示信息
else { tab.push(secondStyle); } //空白信息
}
} }
//显示样式到页面
$("#" + defOptions.id).html(tab.join('')); //跑起来
var interval = null;
var go_i = ;
var go = function () { interval = setInterval(function () {
//console.log(defOptions.speed);
//初始化背景
for (var ii = ; ii <= totalCount; ii++) {
$("#li_" + ii).css("background-color", "#f9f9f9");
} //对当前选中的添加样式
$("#li_" + go_i).css("background-color", "#563d7c");
$("#liShow").html($("#li_" + go_i).attr("title"));
go_i++; if (go_i > totalCount) { go_i = ; }
}, defOptions.speed);
} //绑定开始事件
var slow = null;
var btn = $("button[id='btnStart']");
var orgSpeed = defOptions.speed;
btn.on("click", function () { if (interval != null) { if (slow != null) { return; }
//开始减速-停止
var stopVal = defOptions.speed * ; //时间大于1.2倍后停止
console.log(stopVal);
slow = setInterval(function () { defOptions.speed += orgSpeed / ;
if (defOptions.speed >= stopVal) {
btn.html("奔跑");
if (interval != null) { clearInterval(interval); interval = null; }
clearInterval(slow);
slow = null; } else {
if (interval != null) { clearInterval(interval); interval = null; }
go();
}
}, ); btn.html("减速");
} else {
defOptions.speed = orgSpeed;
btn.html("停止");
go_i = ;
go();
}
});
} $(function () { //初始化跑马灯配置
var option = {
id: "ulShow",
gzName: ["香蕉", "苹果", "手榴弹", "西瓜", "葡萄", "瓜子", "梨子", "樱桃", "钞票", "番茄"],
gzBgImg: ["香蕉.jpg", "苹果.jpg"],
speed: ,
colsSize:
};
xmd(option); $("#selGZ").on("change", function () { var selVal = $(this).val();
option.colsSize = selVal;
xmd(option);
});
})
</script>
效果访问地址：http://7xn3fx.com1.z0.glb.clouddn.com/跑马灯.html