关于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. 在 Boolan 网开讲《网络编程实战》课程

    <网络编程实战>是一门以讲解实例为主的课程,每一节都讲一两个网络编程的例子程序,课程偏重 Linux 服务端 TCP 网络编程. 本课程要求听课人员已经读过<Unix 网络编程> ...

  2. ibatis 批量插入oracle总结

    1. 使用批量插入最先想到如下的插入语句 insert into a (id,name) values('','') ,('','') 但是 oracle 并不支持这种写法 然后查询得知可以使用如下写 ...

  3. Jquery插件开发学习

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  4. Mvc分页扩展类 分页代码 带跳转

    public static class HtmlPager { public static MvcHtmlString MvcPager(this HtmlHelper html, string cu ...

  5. java JFrame窗体真正关闭

    程序: package JFrame.bao; import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent; impor ...

  6. javascript中array常用属性方法

    属性: length 表示一个无符号 32-bit 整数,返回一个数组中的元素个数. 截短数组..截短至长度2  则:   .length = 2 方法: Array.from() 方法可以将一个类数 ...

  7. [转]oracle job有定时执行的功能，可以在指定的时间点或每天的某个时间点自行执行任务。

    oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...

  8. ruby 常注意的

    1.ruby中生成字符串有两种形式 一种单引号,这种在使用时,对字符串不作处理,照原样输出 双引号就不同了,他会查找字符串中需要替换的字符,例如\n,#{}这种都会先替换为需要的值. 所以在使用的时候 ...

  9. 关于原生JS获取类相关的代码

    <script> var FungetElementsByClassName = function(str,root,tag){ if(root){ root = typeof root ...

  10. Bootstrap的安装

    在了解了HTML和CSS.JS之后,我咨询了之前做过这一块的学长,得知了Bootstrap的存在. Bootstrap (Web前端CSS框架) Bootstrap,来自 Twitter,是目前很受欢 ...