<!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. jQuery使用load方法加载其他文档内容

    A文档载入B文档的内容,并且通过JQ操作被引入到A文档中的元素 A文档 (index.html): <!DOCTYPE html> <html lang="en" ...

  2. Android 触摸手势基础 官方文档概览2

    Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...

  3. C 和指针 学习随便

    ---恢复内容开始--- 对NULL的解引用访问,有可能报错,有可能不会,取决于编译器 指针数组以一个NULL指针结束 ######################################## ...

  4. 手把手教你接口自动化测试 – SoapUI & Groovy

    手把手教你接口自动化测试 – SoapUI & Groovy http://www.cnblogs.com/wade-xu/p/4236295.html 关键词:SoapUI接口测试,接口自动 ...

  5. 【原】安装mongo的php插件

    http://pecl.php.net/package/mongo https://github.com/mongodb/mongo-php-driver/tarball/master 1. 安装mo ...

  6. c#版在pc端发起微信扫码支付

    等了好久,微信官方终于发布了.net的demo. 主要代码: /** * 生成直接支付url,支付url有效期为2小时,模式二 * @param productId 商品ID * @return 模式 ...

  7. java日期比较，日期计算

    版权声明:本文为楼主原创文章,未经楼主允许不得转载,如要转载请注明来源. 都是常用的日期之间的比较方法,供以后参考. 热身:获取当前时间 SimpleDateFormat df = new Simpl ...

  8. Oracle 表分区

    从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念 表分区的具体作用 表分区的优缺点 表分区的几种类型及操作方法 对表分区的维护性操作 1.表空间及分区表的概念 表空间: 是一个或多个 ...

  9. leetcode 160

    160. Intersection of Two Linked Lists Write a program to find the node at which the intersection of ...

  10. NHibernate系列文章二十六：NHibernate查询之SQL Query查询（附程序下载）

    摘要 NHibernate在很早的版本就提供了SQL Query(原生SQL查询),对于很复杂的查询,如果使用其他的查询方式实现比较困难的时候,一般使用SQL Query.使用SQL Query是基于 ...