关于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. 1.1使用内置的Camara应用程序捕捉图像

    一: Camara应用程序包含的意图过滤器 <intent-filter> <action android:name="android.media.action.IMAGE ...

  2. Ajax提交与传统表单提交的区别说明

    Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求.比如说我们希望网页总是显示最新的新闻,而又不想老是去点刷新按钮,我们就可以用Ajax机 ...

  3. 5ucms后台调用标签

    <%=Rs.Data(1,i)%>栏目 <%=Rs.Data(2,i)%>标题 <%=Rs.Data(3,i)%>推荐 <%=Rs.Data(4,i)%> ...

  4. 如何将C++代码逆向生成类图 (VS2013)

    1. 将代码添加到VS2013工程中: 2. 切换到"类视图": 3. 选中项目 右键"视图"->"查看类图". 如果项目文件太多的话 ...

  5. fuse入门

    参考1 http://www.cs.nmsu.edu/~pfeiffer/fuse-tutorial/html/running.html 参考2 http://www.maastaar.net/fus ...

  6. ASP.NET操作ORACLE数据库之模糊查询

    ASP.NET操作ORACLE数据库之模糊查询 一.ASP.NET MVC利用OracleHelper辅助类操作ORACLE数据库 //连接Oracle数据库的连接字符串 string connect ...

  7. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  8. spring aop一些名词的理解

    最近想深入了解spring,已经使用spring一段时间,但是对spring的理解一直很肤浅,先把几个常见的名词理解一下. 比如一个ssh架构的电商系统上面有用户模块,商品模块,订单模块,支付模块等, ...

  9. Centos 7下搭建WordPress

    1,首先安装MySQL. http://www.cnblogs.com/zyh120/p/6066983.html 2,继续安装httpd,php,php-mysql这3个服务. [root@loca ...

  10. serialize data use msgpack

    #ifndef _BYTEBUFFER_H #define _BYTEBUFFER_H #include <msgpack.hpp> typedef unsigned char uint8 ...