跑马灯？刚听到这个词的时候，脑袋第一个想到的是跑马？嗯？就是香港的那种跑马场。懂？其次就是霓虹灯了，一闪一闪的多好看。

霓虹灯？哦，那是城市的杰作，记忆中是。开往城市边缘开，把车窗都摇下来，用速度换一点痛快。。。

别问我为什么想到这个歌词，就是想到了。

技术段：

CSS

 <style type="text/css">

     /*1.跑马灯CSS*/

     .marquee {

         position: relative;

         font-size: 1.2rem;

         line-height: 1.44rem;

         height: 1.4rem;

         overflow: hidden;

         color: #666;

     }

     .marquee li {

         overflow: hidden;

         margin-left: 26.5%;

     }

 </style>

HTML

 <!-- 2.跑马灯HTML -->

   <div class="marquee vip_zmd_area">

     <ul id="marqueebox">

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

     </ul>

   </div>

 <!---->

JS

 <script type="text/javascript">

         //3.跑马灯JS

         startmarquee(20, 2000); //速度，间隔

         function startmarquee(speed, delay) {

             var p = false;

             var t;

             var sh;

             var o = document.getElementById("marqueebox");

             var lh = document.querySelector('.marquee').clientHeight;

             o.innerHTML += o.innerHTML;

             o.style.marginTop = 0;

             o.onmouseover = function() {

                 p = true;

             }

             o.onmouseout = function() {

                 p = false;

             }

             function start() {

                 sh = o.offsetHeight;

                 o.style.height = sh + 'px';

                 t = setInterval(scrolling, speed);

                 if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";

             }

             function scrolling() {

                 if(parseInt(o.style.marginTop) % lh != 0) {

                     o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";

                     if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;

                 } else {

                     clearInterval(t);

                     setTimeout(start, delay);

                 }

             }

             setTimeout(start, delay);

             // start();

         }

 </script>

伸手党往下看：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             /*1.跑马灯CSS*/

             .marquee {

                 position: relative;

                 font-size: 1.2rem;

                 line-height: 1.44rem;

                 height: 1.4rem;

                 overflow: hidden;

                 color: #666;

             }

             .marquee li {

                 overflow: hidden;

                 margin-left: 26.5%;

             }

         </style>

     </head>

     <body>

         <!-- 2.跑马灯HTML -->

         <div class="marquee vip_zmd_area">

             <ul id="marqueebox">

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>

             </ul>

         </div>

         <!---->

     </body>

     <script type="text/javascript">

         //3.跑马灯JS

         startmarquee(20, 2000); //速度，间隔

         function startmarquee(speed, delay) {

             var p = false;

             var t;

             var sh;

             var o = document.getElementById("marqueebox");

             var lh = document.querySelector('.marquee').clientHeight;

             o.innerHTML += o.innerHTML;

             o.style.marginTop = 0;

             o.onmouseover = function() {

                 p = true;

             }

             o.onmouseout = function() {

                 p = false;

             }

             function start() {

                 sh = o.offsetHeight;

                 o.style.height = sh + 'px';

                 t = setInterval(scrolling, speed);

                 if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";

             }

             function scrolling() {

                 if(parseInt(o.style.marginTop) % lh != 0) {

                     o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";

                     if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;

                 } else {

                     clearInterval(t);

                     setTimeout(start, delay);

                 }

             }

             setTimeout(start, delay);

             // start();

         }

     </script>

 </html>

这是一个上下滚动的跑马灯，需要左右滚动的同学，自己研究下。

前端这条路，我似乎越陷越深了，那就让我陷下去吧。

好想来一趟旅行，往西藏，往尼泊尔，往印度，往土耳其，往欧洲，往美国，往巴西，往澳大利亚，往新加坡。

js_跑马灯的更多相关文章

  1. jq跑马灯效果

    这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...

  2. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...

  3. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  4. IOS跑马灯效果，实现文字水平无间断滚动

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...

  5. 【IOS】自定义可点击的多文本跑马灯YFRollingLabel

    需求 项目中需要用到跑马灯来仅展示一条消息,长度合适则不滚动,过长则循环滚动. 虽然不是我写的,但看了看代码,是在一个UIView里面放入两个UILabel, 在前一个快结束的时候,另一个显示.然而点 ...

  6. Android:TextView文字跑马灯的效果实现

    解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...

  7. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  8. Third Day:正式编程第三天,学习实践内容TextView跑马灯、AutoCompleteTextView、multiAutoCompleteTextView以及ToggleButton、checkedBox、RadioButton等相关实践

    2.针对Focused的TextView跑马灯(文字较多一行无法显示)效果 针对单个TextView的跑马灯效果,可直接在TextView控件参数中添加三个属性: android:singleLine ...

  9. TextView跑马灯效果

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

随机推荐

  1. 一个比较典型的WMI查询

    Get-WmiObject win32_bios -ComputerName server1, server2 | Format-Table ` @{n='Hostname';e={$_.__serv ...

  2. 读取游标 BEGIN END

    USE db_2008 --引入数据库 DECLARE ReadCursor CURSOR --声明一个游标 FOR SELECT * FROM Student OPEN ReadCursor --打 ...

  3. KMP算法字符串查找子串

    题目: 经典的KMP算法 分析: 和KMP算法对应的是BF算法,其中BF算法时间复杂度,最坏情况下可以达到O(n*m),而KMP算法的时间复杂度是O(n + m),所以,KMP算法效率高很多. 但是K ...

  4. 【python】Python 之 __new__() 方法与实例化

    本文转自:http://www.cnblogs.com/ifantastic/p/3175735.html __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 ...

  5. BZOJ 2333 棘手的操作(离线+线段树+带权并查集)

    这题搞了我一天啊...拍不出错原来是因为极限数据就RE了啊,竟然返回WA啊.我的线段树要开8倍才能过啊... 首先可以发现除了那个加边操作,其他的操作有点像线段树啊.如果我们把每次询问的联通块都放在一 ...

  6. 【bzoj3132】上帝造题的七分钟 二维树状数组区间修改区间查询

    题目描述 “第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a,b),右下角为(c,d)的一个矩形区域内的全部数字加上一个值的操作. ...

  7. 【bzoj4278】[ONTAK2015]Tasowanie 贪心+后缀数组

    题目描述 给定两个数字串A和B,通过将A和B进行二路归并得到一个新的数字串T,请找到字典序最小的T. 输入 第一行包含一个正整数n(1<=n<=200000),表示A串的长度. 第二行包含 ...

  8. 安装单机Hadoop系统（完整版）——Mac

    在这个阴雨绵绵的下午,没有睡午觉的我带着一双惺忪的眼睛坐在了电脑前,泡上清茶,摸摸已是略显油光的额头(笑cry),,奋斗啊啊啊啊!!%>_<% 1.课程回顾. 1.1 Hadoop系统运行 ...

  9. hadoop 将HDFS上多个小文件合并到SequenceFile里

    背景:hdfs上的文件最好和hdfs的块大小的N倍.如果文件太小,浪费namnode的元数据存储空间以及内存,如果文件分块不合理也会影响mapreduce中map的效率. 本例中将小文件的文件名作为k ...

  10. BZOJ4557：[JLOI2016/SHOI2016]侦察守卫——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4557 小R和B神正在玩一款游戏.这款游戏的地图由N个点和N-1条无向边组成,每条无向边连接两个点, ...