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>
