关于marquee，就不多说了，可以戳这里。

毕竟他是一个很古老的元素，现在的标准里头也不推荐使用这个标签了。但平时一些项目中会经常碰到这样的效果，每次都是重新写一遍，麻烦！

JS类实现marquee

今天倒弄了一个类，还不全，打个草稿吧~ 下次就凑合着用吧。

DEMO在这里，戳我

/**

* @author 靖鸣君

* @email jingmingjun92@163.com

* @description 滚动

* @class Marquee

* @param {Object}

*/

var Marquee = function(){

    this.direction = "top";

    this.speed = 30;

};

Marquee.prototype = {

    //initial

    init: function(obj, setttings){

        this.obj = obj;

        this._createBox();

        this.scroll();

        if(settings){

            settings.direction && (this.direction = settings.direction);

            settings.speed && (this.speed = settings.speed);

        }

    },

    _createBox: function(){

        //create inner box A

        this.iBox = document.createElement("div");

        var iBox = this.iBox;

        with(iBox.style){

            width = "100%";

            height = "100%";

            overflow = "hidden";

        }

        iBox.setAttribute("id", "marqueeBoxA");

        iBox.innerHTML = obj.innerHTML;

        //clone inner box B

        var iBox2 = iBox.cloneNode(true);

        iBox2.setAttribute("id", "marqueeBoxB");

        //append to obj Box

        this.obj.innerHTML = "";

        this.obj.appendChild(iBox);

        this.obj.appendChild(iBox2);

    },

    //animation

    scroll: function() {

        var _self = this;

        this.timer = setInterval(function(){

            _self._ani();

        }, this.speed);

    },

    //setInterval function

    _ani: function() {

        if(obj.clientHeight - obj.scrollTop <= 0){

            obj.scrollTop = obj.offsetHeight - obj.scrollTop + 1;

        } else {

            obj.scrollTop++;

            console.log(obj.offsetHeight, obj.scrollTop);

        }

    },

    stop: function(){

        clearInterval(this.timer);

    },

    start: function(){

        this.scroll();

    }

};

Javascript Marquee Class

gists地址：https://gist.github.com/barretlee/6095976

代码写的比较粗糙，下面说说这个思路：

BoxA和BoxB内容相同，当BoxA滚动离开外层盒子时，把scrollTop设置成，当前的scrollTop - BoxA的高度，记得再加上一个1.

思路很简单，操作也很方便，我比较习惯用scrollTop来控制移动，有的人也喜欢用绝对定位和相对定位配合，但是这样写出来的插件兼容性不是很好，有些页面定位元素太多，可能会造成插件的样式乱套。

这个插件（楼主比较懒，还没有写完）的使用方式：

var marquee = new Marquee(),

    obj = document.getElementById("box");

marquee.init(obj);

对应的html代码：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

    <style type="text/css">

        #box {

            width: 150px;

            height: 200px;

            border:1px solid #EFEFEF;

            background: #F8F8F8;

            padding:0 20px;

            line-height:22px;

            overflow:hidden;

        }

    </style>

</head>

<body>

    <div id="box">

        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />

        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />

    </div>

</body>

</html>

当然，给了几个接口：

marquee.init(obj, {

     direction: "xx",  //这个还没写，一般就是top和left吧~

     speed: 30

});

 补充一个css3下marquee的知识点

overflow:-webkit-marquee;//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式，分三种。

scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。

slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。

alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数，infinite 为

无限多次，不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right; //跑动的方向，这个要注

意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。

实例：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

    <style type="text/css">

        h1 {

            color:rgba(250,100,100,0.7);

            height:40px;

            line-height:40px;

            width:400px;

            overflow: -webkit-marquee;

            -webkit-marquee-style: scroll;

            -webkit-marquee-repetition: infinite;

            -webkit-marquee-direction: right;

            -webkit-marquee-speed:normal;

            border:1px #ccc solid;

            margin-top: 30px;

        }

        h1.left {

            -webkit-marquee-direction: left;

        }

        h1.up {

            -webkit-marquee-direction: up;

        }

        h1.down {

            -webkit-marquee-direction: down;

        }

</style>

</head>

<body>

<h1>我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1>

<h1 class="up">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1>

<h1 class="left">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1>

<h1 class="down">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1>

</body>

</html>

DEMO地址：http://qianduannotes.sinaapp.com/marquee/css3marquee.html （此属性在后续新版本中已经不提供支持了  修改于2013/11/09）

这个还是蛮实用的~做下兼容性处理，我觉得，可以直接拿过来用：)

一个不陌生的JS效果-marquee,用css3来实现的更多相关文章

  1. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  2. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  3. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

  4. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  5. 类js效果

    类似js效果,点击看看  代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面

  6. 【Animation】 使用handler和Runnable实现某一个控件的抖动效果

    布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool ...

  7. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  8. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  9. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

随机推荐

  1. B-Tree 学习

    算法导论 第18章 B树与其他树的结构不同的是  B数是多叉而不是二叉树 而且分叉因子很大一般使用于数据库 针对需要硬盘IO的情况而使用 可以降低磁盘IOB树的一个节点是以磁盘的页面为单位,而不是数据 ...

  2. jQuery的ajax问题

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th ...

  3. adv联系题

    http://www.cnblogs.com/kuangbin/archive/2011/07/29/2120667.html(新)

  4. 3515 如何调试AT指令、查看拨号模块的打印

    冯sir给了一个在设备运行的程序serial,运行起来后可以敲指令输入AT指令,具体步骤如下: 1.将serial文件从U盘拷贝到设备里,U盘在设备系统下的目录是/stm/udisk/0/,但是注意设 ...

  5. CSS布局技巧 -- sticky属性

    在一些很长的表格中,往往需要使用表头悬浮的设计以方便用户使用,例如H5电商页面通过下滑展示大量商品列表时,顶部的导航栏需要在离开屏幕时,需要固定在屏幕顶部以方便用户筛选类别.这种效果一直以来需要通过J ...

  6. 【转】 71道经典Android面试题和答案,重要知识点都包含了

    ,,面试题1.        下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存  B.内存回收程序负责释放无用内存   C.内存回收程序允许程序员直接释放内存 ...

  7. Mac 系统下的环境变量

    1.查看电脑环境变量   -->echo $PATH 2. 新建环境变量   sudo vim ~/.bash_profile  输入密码 3. 按 I ,编辑新的环境变量地址,保存 退出 :w ...

  8. spring官网改版后，如何下载jar包

    http://repo.springsource.org/libs-release-local/org/springframework 通过以上地址,可树型查看所有发布的包 问题是,官网页面上为何找不 ...

  9. 断言（ASSERT)的用法

    ASSERT ()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继续执行后面的语句.这个宏通常原来判 ...

  10. 使用hibernate可以优化的地方

    a.  在查询字符串中,应该总是使用jdbc的占位符?,或使用使用命名参数:,不要自查询中使用字符串值来代替非常量值. b.  Flush会影响性能,频繁刷新影响性能,尽量减少不必要的刷新. c.   ...