文字无缝滚动跨浏览器问题

非典型宅男c 2012-07-17 05:20:06



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>



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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />





<title>文字滚动</title>



   <style>

            .ul {

                height:18px; 

				 width:180px;

                overflow:hidden;

				list-style:none;

            }

            .li {

                height:24px; line-height:24px; font-size:12px;

            }

        </style>        

    </head>

    <body>

        <ul id="speaker" class="ul">

            <li class="li">1-1</li>

            <li class="li">1-2</li>

            <li class="li">1-3</li>

            <li class="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*10000;

                    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('speaker', 24, .2)

        </script>

    </body>

</html>



大家帮我看下 我这个jsp页面 的文字无缝滚动，在IE和火狐下能正常运行，但是不能兼容谷歌浏览器。

想知道是哪里出来问题~~