一般用于公告的滚动效果

<!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. Java并发编程之volatile的应用

    在多线程的并发编程中synchronized和volatile都扮演着重要的角色.volatile是轻量级的synchronized,它在多处理器的开发中保证了共享变量的可见性,可见性的意思是当一个线 ...

  2. 深入理解 js this 绑定机制

    函数调用位置 与词法作用域相反的是,this的指向由函数运行时决定,它是动态的,随着函数调用位置变化而变化. 要理解 this,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而 不是声明的 ...

  3. postgresql子查询优化(提升子查询)

    问题背景 在开发项目过程中,客户要求使用gbase8s数据库(基于informix),简单的分页页面响应很慢.排查发现分页sql是先查询出数据在外面套一层后再取多少条,如果去掉嵌套的一层,直接获取则很 ...

  4. CAS优缺点

    cas优点:如一描述在并发量不是很高时cas机制会提高效率.cas缺点:1.cpu开销大,在高并发下,许多线程,更新一变量,多次更新不成功,循环反复,给cpu带来大量压力.2.只是一个变量的原子性操作 ...

  5. Python 1行代码实现文本分类(实战笔记)，含代码详细说明及运行结果

    Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果 一.详细说明及代码 tc.py =============================================== ...

  6. ubuntu 下 重启 mongo 后 遇到蛋疼问题。

    以后,切忌 mongo 正常关闭后 ,再重启ubuntu. 否则后果这是很严重. 2014.8.6日 PM 6点. 网站莫名打不开了,全部是空白,又是老问题. 幸亏 及时发现,那就重启下. 蛋疼,重启 ...

  7. 命令行创建Android应用，命令行生成签名文件，命令行查看签名信息，对APK包签名并编译运行

    一.命令行创建Android应用 android create project -n HelloWorld -t android-22 -p HelloWorld1 -k org.crazyit.he ...

  8. Android 开发工具类 27_多线程下载大文件

    多线程下载大文件时序图 FileDownloader.java package com.wangjialin.internet.service.downloader; import java.io.F ...

  9. C# base和this ---转载 小昊

    new关键字引起了大家的不少关注,尤其感谢 Anders Liu的补充,让我感觉博客园赋予的交流平台真的无所不在.所以,我们就有必要继续这个话题,把我认为最值得关注的关键字开展下去,本文的重点是访问关 ...

  10. 《垃圾回收的算法与实现》——保守式GC

    保守式GC 保守式GC指"不能识别指针和非指针的GC". 不明确的根,寄存器.调用栈.全局变量空间等属于GC root,这些GC均不能识别出是指针还是非指针. 指针的识别,在不明确 ...