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

zeptojs-跑马灯效果的更多相关文章

  1. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  2. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  3. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  4. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  5. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  6. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

  7. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  8. [Android1.5]TextView跑马灯效果

    from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言 这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...

  9. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

  10. 设置TextView的密码效果以及跑马灯效果

    密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

随机推荐

  1. FFmpeg学习6：视音频同步

    在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...

  2. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. SQL Server镜像自动生成脚本

    SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...

  4. ASP.NET WebApi OWIN 实现 OAuth 2.0

    OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth 允许用户提供一个令牌, ...

  5. Ajax实现原理，代码封装

    都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和 ...

  6. 【热门技术】EventBus 3.0，让事件订阅更简单，从此告别组件消息传递烦恼~

    一.写在前面 还在为时间接收而烦恼吗?还在为各种组件间的消息传递烦恼吗?EventBus 3.0,专注于android的发布.订阅事件总线,让各组件间的消息传递更简单!完美替代Intent,Handl ...

  7. 由js apply与call方法想到的js数据类型（原始类型和引用类型）

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  8. Ajax.BeginForm方法 参数

    感谢博主 http://www.cnblogs.com/zzgblog/p/5454019.html toyoung 在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Aja ...

  9. MySQL常见面试题

    1. 主键 超键 候选键 外键 主 键: 数据库表中对储存数据对象予以唯一和完整标识的数据列或属性的组合.一个数据列只能有一个主键,且主键的取值不能缺失,即不能为空值(Null). 超 键: 在关系中 ...

  10. linux yum命令详解

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...