<!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. php实现等比例不失真缩放上传图片

    有时上传图片时因为图片太大了,不仅占用空间,消耗流量,而且影响浏(图片的尺寸大小不一).下面分享一种等比例不失真缩放图片的方法,这样,不管上传的图片尺有多大,都会自动压缩到我们设置尺寸值的范围之内.经 ...

  2. [solr] - suggestion

    前文使用了SpellCheck做了个自动完成模拟(Solr SpellCheck),使用第一种SpellCheck方式做auto-complete,是基于动态代码方式建立内容,下面方式可通过读文件方式 ...

  3. python学习-day18、文件处理、

    4.文件操作 武sir:http://www.cnblogs.com/wupeiqi/articles/4943406.html 林海峰:http://www.cnblogs.com/linhaife ...

  4. 53. Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  5. Windows下使用scapy+python2.7实现对pcap文件的读写操作

    scapy在linux环境中对pcap文件进行操作非常方便,但在windows下,特别是在python2.7环境下却会碰到各种各样的依赖包无法使用的问题,最明显的可能就属dnet和pcap的pytho ...

  6. 使用C#对SQLLite进行操作

    1.数据库连接(常用连接方法,示例) 1). 添加引用: System.Data.SQLite.DLL .2). 打开或创建数据库文件: SQLiteConnection.CreateFile(fil ...

  7. Hbase集群搭建及所有配置调优参数整理及API代码运行

    最近为了方便开发,在自己的虚拟机上搭建了三节点的Hadoop集群与Hbase集群,hadoop集群的搭建与zookeeper集群这里就不再详细说明,原来的笔记中记录过.这里将hbase配置参数进行相应 ...

  8. 使用Atlas实现MySQL读写分离

    1.MySQL所在机器 192.168.29.128(Master) 192.168.29.129(Slave) 配置好主从同步,参考 http://www.cnblogs.com/luxh/p/40 ...

  9. PNG与iOS优化选项

    从App Store下载到的每一枚App最初都是一只IPA文件(其实是zip格式,内含特定规则的文件夹组织方式).但当作zip解开之后会发现里面很多的PNG文件看不了,这是因为在这些PNG图像都已被i ...

  10. 四、maya python plugin

    只是作简单的了解. 1区别 (1)Python scripts:可以在Maya的script editor 执行.用于扩展maya.cmd模块. The import statement below ...