zeptojs-跑马灯效果

  1. 云栖社区>
  2. 博客>
  3. 正文

zeptojs-跑马灯效果

神牛003 2016-04-21 10:34:00 浏览376
展开阅读全文

  去年的时候了解学习了一下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>
View Code

  效果访问地址:http://7xn3fx.com1.z0.glb.clouddn.com/跑马灯.html

git地址: https://github.com/shenniubuxing3    nuget发布包:https://www.nuget.org/profiles/shenniubuxing3
img_b0f7f3094651b5685efcc535a055b326.gif

网友评论

登录后评论
0/500
评论
神牛003
+ 关注