<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="gb2312" />

        <title></title>

        <style>

            ul {

                margin:100px;

                height:22px;

                border:1px solid red;

                overflow:hidden;

            }

            li {

                height:22px; line-height:22px; font-size:12px;

            }

        </style>

    </head>

    <body>

        <ul id="a">

            <li>1-1</li>

            <li>1-2</li>

            <li>1-3</li>

            <li>1-4</li>

        </ul>

        <script>

            //document.getElementById()的最简化应用

            function $(element){

                if(arguments.length>1){

                    for(var i=0,length=arguments.length,elements=[];i<length;i++){

                        elements.push($(arguments[i]));

                    }

                    return elements;

                }

                if(typeof element=="string"){

                    return document.getElementById(element);

                }else{

                    return element;

                }

            }

            //类创建函数

            var Class={

                create:function(){

                    return function(){

                        this.initialize.apply(this,arguments);

                    }

                }

            }

            //对象属性方法扩展

            Function.prototype.bind=function(object){

                var method=this;

                return function(){

                    method.apply(object,arguments);

                }

            }

            var Scroll=Class.create();

            Scroll.prototype={

                //第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度

                initialize:function(element,height,delay){

                    this.element=$(element);

                    this.element.innerHTML+=this.element.innerHTML;

                    this.height=height;

                    this.delay=delay*1000;

                    this.maxHeight=this.element.scrollHeight/2;

                    this.counter=0;

                    this.scroll();

                    this.timer="";

                    this.element.onmouseover=this.stop.bind(this);

                    this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);

                },

                scroll:function(){

                    if(this.element.scrollTop<this.maxHeight){

                        this.element.scrollTop++;

                        this.counter++;

                    }else{

                        this.element.scrollTop=0;

                        this.counter=0;

                    }

                    if(this.counter<this.height){

                        this.timer=setTimeout(this.scroll.bind(this),5);

                    }else{

                        this.counter=0;

                        this.timer=setTimeout(this.scroll.bind(this),this.delay);

                    }

                },

                stop:function(){

                    clearTimeout(this.timer);

                }

            }

            new Scroll('a', 22, 2)

        </script>

    </body>

</html>

实现公告栏无缝滚动的js代码（转）的更多相关文章

  1. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  2. 图片左右滚动的js代码

    html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...

  3. 文字自动自左向右滚动的js代码

    重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-he ...

  4. 滚动条响应鼠标滑轮事件实现上下滚动的js代码

    <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...

  5. 无缝滚动 jQuery经典代码 （收藏）

    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4 ...

  6. marquee横向无缝滚动无js

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...

  7. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  9. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. js call()和apply()

    一.call()和apply(),实例如下: function add(a,b) {     alert(a+b); } function sub(a,b) {     alert(a-b); } a ...

  2. [转]理解android.intent.category.LAUNCHER 具体作用

    转自:http://blog.csdn.net/jackrex/article/details/9189657 android.intent.category.LAUNCHER 具体有什么作用?我做一 ...

  3. Navicat(服务器对象) -2之MySQL 或 MariaDB 对象

    MySQL 或 MariaDB 对象 http://www.navicat.com.cn/manual/online_manual/cn/navicat/win_manual/index.html 要 ...

  4. NineOldAndroid开源库简单使用demo

    看到很多开源库都使用了这个动画框架,就自己试了一下,果然很强大.把测试代码贴上,方便以后使用 package com.test.animation; import android.animation. ...

  5. html 定位问题

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  6. Zero Requiem

    “最后是在游行.暴君鲁路修高居王座,两侧列着所有反对者的代表:黑色骑士团.黎星刻.原圆桌骑士名列第三的吉诺,以及一身女囚装的娜娜丽,他们都即将被公开处死.尤菲米娅在第一次“特别行政区•日本”成立仪式上 ...

  7. delphi控件属性和事件

    常用[属性]  Action:该属性是与组件关联的行为,允许应用程序集中响应用户命令  Anchors:与组件连接的窗体的位置点  Align:确定组件的对齐方式  AutoSize:确定组件是否自动 ...

  8. C++设计模式-Singleton

    Singleton单例模式 Singleton 是对全局变量的取代策略作用:保证一个类只能有一个实例,并提供一个全局唯一的访问点. 仅有一个实例:通过类的静态成员变量来体现.提供访问它的全局访问点:访 ...

  9. RNN神经网络和英中机器翻译的实现

    本文系qitta的文章翻译而成,由renzhe0009实现.转载请注明以上信息,谢谢合作. 本文主要讲解以recurrent neural network为主,以及使用Chainer和自然语言处理其中 ...

  10. 基于boa服务器的web控制mini2440的GPIO口

    win7 系统  虚拟机:ubuntu12.04 开发板:mini2440 上一篇已经详细的讲解了如何配置boa服务器,在这里我们就要利用boa服务器带来的便利,利用web控制开发板上的GIPO口,这 ...