你的位置:首页 > Java教程

[Java教程]zeptojs


  去年的时候了解学习了一下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="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='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='{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: 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>

View Code

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