一般用于公告的滚动效果

<!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,speed){

                    this.element=$(element);

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

                    this.height=height;

                    this.delay=delay*1000;

                    this.speed=speed;

                    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),this.speed);

                    }else{

                        this.counter=0;

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

                    }

                },

                stop:function(){

                    clearTimeout(this.timer);

                }

            }

            new Scroll('a', 22,2.5,15)

        </script>

    </body>

</html>

[js样式效果]具有停顿效果上下滚动方式的更多相关文章

  1. js 上下滚动加停顿效果，js 跑马灯加停顿效果

    <div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...

  2. 使用js实现带有停顿效果的图片滚动（按钮控制）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  4. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  5. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  6. 实用js+css多级树形展开效果导航菜单

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

  7. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  8. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  9. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

随机推荐

  1. 【wireshark】协议解析

    1. 普通解析 Wireshark启动时,所有解析器进行初始化和注册.要注册的信息包括协议名称.各个字段的信息.过滤用的关键字.要关联的下层协议与端口(handoff)等.在解析过程,每个解析器负责解 ...

  2. php 对象 调用静态方法

    1.BNF范式 .u.op.opline_num = , &$ TSRMLS_CC); } function_call_parameter_list .u.op.opline_num?NULL ...

  3. 修改WAMPServer(Apache+PHP+MySQL一键式安装)中mysql默认空密码

    Note:在EclipsePHP中配置WorkSpace时,将工作目录指到执行PHP代码的www目录下 ,便于在Eclipse下编写PHP项目          eg:D:\KelvinSoftwar ...

  4. JavaScript中的垃圾回收机制与内存泄露

    什么是内存泄露? 任何编程语言,在运行时都需要使用到内存,比如在一个函数中, var arr = [1, 2, 3, 4, 5]; 这么一个数组,就需要内存. 但是,在使用了这些内存之后, 如果后面他 ...

  5. 维特比算法（Viterbi）-实例讲解(暴力破解+代码实现)

    1.简介 维特比算法是一个通用的求序列最短路径的动态规划算法,也可以用于很多其他问题,比如:文本挖掘.分词原理.既然是动态规划算法,那么就需要找到合适的局部状态,以及局部状态的递推公式.在HMM中,维 ...

  6. 使用Topshelf部署Windows服务

    新建一个控制台应用程序,使用Nuget安装TopShelf: nuget Install-Package Topshelf 测试代码: 在Main中输入: //FileInfo fi = new Fi ...

  7. PullToRefreshListView 进入界面不能立即显示刷新控件的bug 解决方案

    1.首先定位到PullToRefreshListView.java这个文件 2.找到onRefreshing(final boolean doScroll)方法 @Override protected ...

  8. android studio生成aar包并在其他工程引用aar包

    1.aar包是android studio下打包android工程中src.res.lib后生成的aar文件,aar包导入其他android studio 工程后,其他工程可以方便引用源码和资源文件 ...

  9. 机器学习--聚类系列--DBSCAN算法

    DBSCAN算法 基本概念:(Density-Based Spatial Clustering of Applications with Noise) 核心对象:若某个点的密度达到算法设定的阈值则其为 ...

  10. NodeJS调用jar包

    我们在实际的生产.开发实践中,其实要和许多第三方服务商进行打交道,这其中包括使用他们提供的批量与联机服务,但与别的互联网企业不大相同的是,银行作为传统企业,其一贯重视安全性,许多在互联网企业看似理所当 ...