zoukankan      html  css  js  c++  java
  • [js样式效果]具有停顿效果上下滚动方式

    一般用于公告的滚动效果

    <!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>
  • 相关阅读:
    myeclipse源码相关操作
    来自一个程序员内心深处的心声
    编程乐趣--汉字转拼音
    MyEclipse下安装FreeMark插件
    java web 加载Spring --web.xml 篇
    注解方式实现声明式事务管理
    spring与struts简单整合案例
    创建对象与对象依赖关系
    几种对数据的处理以及对数据的封装
    Action开发、通配符、路径问题和struts中常量用法
  • 原文地址:https://www.cnblogs.com/lovetangyuxian/p/10049351.html
Copyright © 2011-2022 走看看