不间断滚动一卡一卡是为什么？

今天忙完了抽空翻了下一起自己写的一个不间断滚动的效果，不过不知道为什么会出现一卡一卡的现象，因为当时比较忙就暂时放下了，今天拿出来看还是找到不到问题所在，高手指点下，还有我个人写js一直是这样习惯封装的，求高手指点能不能在优化，和给个其他方向代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>marquee</title>
<style type="text/css">
body,div,h2,ul,li,strong,a,span{padding:0;margin:0;}
body{font:12px/20px Verdana;color:#000;}
.marquee{height:287px;border:1px solid #ccc;background:#f5f5f5;width:500px;margin:10px auto;overflow:hidden;}
.marquee h2{height:25px;font:14px/25px Verdana;background:#000;color:#fff;position:relative;z-index:50;text-indent:10px;}
#mq-con{height:195px;position:relative}
#mq-con ul{position:absolute;left:0;top:0;width:100%;z-index:40;}
#mq-con li{height:25px;line-height:25px;display:block;text-indent:10px;border-bottom:1px dashed #ff99cc;}
#mq-con li strong{color:#f06;}
</style>
</head><body>
<!--marqueeArea-->
<div class="marquee">
    <h2>获奖名单</h2>
    <div id="mq-con">
        <ul>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
        </ul>
    </div>
</div>
<script language="javascript">
//getElement
$_get = function(id,e){
var getId = typeof id == "string" ? document.getElementById(id) : false;
if(arguments.length==1)return getId;
if(getId&&arguments.length==2){
getId = typeof e == "string" ? getId.getElementsByTagName(e) : false;
if(getId.length==1)return getId[0];
return getId
}
return false;
}
$_get.prototype.c = function(c,e){
var allEle = document.getElementsByTagName("*"),classObj=[];
for(var i=0,len=allEle.length;i<len;i++){
var eleClass = allEle[i].className;
if(eleClass&&eleClass.indexOf(c)>=0)classObj.push(allEle[i])
}
if(classObj.length==1) return classObj[0];
return classObj;
}
//getClass
var $_class = new $_get;
//marqueeArea
function roll(o){
var _this = this;
this.obj = o;
this.i=0;
this.timeId = this.MaxH = null;
o.onmouseover = function(){_this.stopEven()}
o.onmouseout = function(){_this.autoTop()}
}
roll.prototype = {
initial:function(){
var c = this.obj.getElementsByTagName("li");
this.MaxH = c.length*c[0].offsetHeight;
this.obj.innerHTML+=this.obj.innerHTML
this.autoTop();
},
autoTop:function(){
var _this = this;
this.i++;
this.i=this.i>=this.MaxH?0:this.i
this.obj.style.top = "-" + this.i + "px";
this.timeId = setTimeout(function(){_this.autoTop()},20);
},
stopEven:function(){
clearInterval(this.timeId)
}
}//上面的代码是从我写的文件里面抽出来的关于这个问题的部分代码，都是些个人的编写习惯求高手指点，真心求教
//initial
var pc =  $_get("mq-con","ul"),quy = new roll(pc).initial();quy = null;
</script>
</body>
</html>

解决方案 »

  1.   


    body{background-image:url(about:blank);background-attachment:fixed} //试试
      

  2.   

    <!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 type="text/css">
    body,div,h2,ul,li,strong,a,span{padding:0;margin:0;}
    body{font:12px/20px Verdana;color:#000;}
    .marquee{height:287px;border:1px solid #ccc;background:#f5f5f5;width:500px;margin:10px auto;overflow:hidden;}
        .marquee h2{height:25px;font:14px/25px Verdana;background:#000;color:#fff;position:relative;z-index:50;text-indent:10px;}
        #mq-con{height:195px;position:relative}
        #mq-con ul{position:absolute;left:0;top:0;width:100%;z-index:40;}
        #mq-con li{height:25px;line-height:25px;display:block;text-indent:10px;border-bottom:1px dashed #ff99cc;}
        #mq-con li strong{color:#f06;}
    </style>
    </head><body>
    <div class="marquee">
        <h2>获奖名单</h2>
        <div id="mq-con">
            <ul>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    //获取id的元素或者其子元素
    $_get = function(id,e){
        var getId = typeof id == "string" ? document.getElementById(id) : false;
        if(arguments.length==1)return    getId;
        if(getId&&arguments.length==2){
            getId = typeof e == "string" ? getId.getElementsByTagName(e) : false;   
            if(getId.length==1)return getId[0];
            return    getId
        }
        return false;
    }
    //marqueeArea
    function roll(o){
        var _this = this;
        this.obj = o;
        this.i=0;
        this.timeId = this.MaxH = null;
        o.onmouseover = function(){_this.stopEven()}
        o.onmouseout = function(){_this.autoTop()}
    }
    roll.prototype = {
        initial:function(){
            var c = this.obj.getElementsByTagName("li");
            this.MaxH = (c.length-1)*c[0].offsetHeight;
            this.obj.innerHTML+=this.obj.innerHTML
            this.autoTop();
        },
        autoTop:function(){
            var _this = this;
            this.i++;
            this.i=this.i>=this.MaxH?0:this.i
            this.obj.style.top = "-" + this.i + "px";
            this.timeId = setTimeout(function(){_this.autoTop()},20);
        },
        stopEven:function(){
            clearInterval(this.timeId)   
        }
    }
     
    var pc =  $_get("mq-con","ul"),quy = new roll(pc).initial();quy = null;
    </script>
    </body>
    </html>
    我的不卡啊  是每次间断的意思吗？
      

  3.   

    那个最后一个li滚动后截断的问题还不能那样该 发现一大堆的问题  现在只能想到绝对定位了 但貌似样式就不对了的样子
    <!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 type="text/css">
    body,div,h2,ul,li,strong,a,span{padding:0;margin:0;}
    body{font:12px/20px Verdana;color:#000;}
    .marquee{height:237px;border:1px solid #ccc;background:#f5f5f5;width:500px;margin:10px auto;overflow:hidden;}
        .marquee h2{height:25px;font:14px/25px Verdana;background:#000;color:#fff;position:relative;z-index:50;text-indent:10px;}
        #mq-con{height:145px;position:relative;}
        #mq-con ul{position:absolute;left:0;top:0;width:100%;z-index:40;}
        #mq-con li{height:25px;line-height:25px;display:block;text-indent:10px;border-bottom:1px dashed #ff99cc;}
        #mq-con li strong{color:#f06;}
    </style>
    <script type="text/javascript">
    function Test(){
    this.ulHeight=0;
    this.liHeight=0;
    this.lis=document.getElementsByTagName("li");
    }
    Test.prototype={
    getHeight:function(ele){
    var height=0;
    var de=document.defaultView;
    if(ele.style.heigth){
    return ele.style.height;
    }else if(de&&de.getComputedStyle){
    height=de.getComputedStyle(ele).height;
    }else{
    height=ele.currentStyle.height;
    }
    return height=='auto'?ele.offsetHeight:height;
    },
    scrol:function(t){
    for(var i=0,len=t.lis.length;i<len;i++){
    t.lis[i].style.top=parseInt(t.lis[i].style.top)-1+"px";
    if(parseInt(t.lis[i].style.top)<-t.liHeight){
    t.lis[i].style.top=t.ulHeight+"px";
    }
    }
    window.setTimeout(function(){t.scrol(t)},20);
    },
    init:function(){
    this.liHeight=parseInt(this.getHeight(this.lis[0]));
    this.ulHeight=parseInt(this.liHeight)*(this.lis.length-1);
    for(var i=0,len=this.lis.length;i<len;i++){
    this.lis[i].style.position='absolute';
    this.lis[i].style.top=i*parseInt(this.liHeight)+"px";
    }
    this.scrol(this);
    }
    }
    window.onload=function(){
    var t=new Test();
    t.init();
    }
    </script>
    </head><body>
    <div class="marquee">
        <h2>获奖名单</h2>
        <div id="mq-con">
            <ul>
                <li>恭喜<strong>GJJ1</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ2</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ3</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ4</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ5</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ6</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ7</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ8</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ9</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
      

  4.   

    我这里有个简单的例子：
    http://blog.csdn.net/chenghui0317/article/details/8170001
      

  5.   

    `<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>marquee</title>
    <style type="text/css">
    body,div,h2,ul,li,strong,a,span{padding:0;margin:0;}
    body{font:12px/20px Verdana;color:#000;}
    .marquee{height:auto;border:1px solid #ccc;background:#f5f5f5;width:500px;margin:10px auto;overflow:hidden;}
        .marquee h2{height:25px;font:14px/25px Verdana;background:#000;color:#fff;position:relative;z-index:50;text-indent:10px;}
        #mq-con{height:195px;position:relative}
        #mq-con ul{left:0;top:0;width:100%;z-index:40;}
        #mq-con li{height:25px;line-height:25px;display:block;text-indent:10px;border-bottom:1px dashed #ff99cc;}
        #mq-con li strong{color:#f06;}
    </style>
    </head>
     
    <body>
    <!--marqueeArea-->
    <div class="marquee">
        <h2>获奖名单</h2>
        <div id="mq-con">
            <ul style="padding-top:0;padding-bottom: 0;margin-top:0;margin-bottom: 0;">
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
                <li>恭喜<strong>GJJ</strong><a href="#">获得游戏道具</a><span class="date-time">12-11-8</span></li>
            </ul>
        </div>
    </div>
    <script language="javascript">
    //getElement
    $_get = function(id,e){
        var getId = typeof id == "string" ? document.getElementById(id) : false;
        if(arguments.length==1)return    getId;
        if(getId&&arguments.length==2){
            getId = typeof e == "string" ? getId.getElementsByTagName(e) : false;    
            if(getId.length==1)return getId[0];
            return    getId
        }
        return false;
    }
     
     
     
     
    $_get.prototype.c = function(c,e){
        var allEle = document.getElementsByTagName("*"),classObj=[];
        for(var i=0,len=allEle.length;i<len;i++){
            var eleClass = allEle[i].className;
            if(eleClass&&eleClass.indexOf(c)>=0)classObj.push(allEle[i])
        }
        if(classObj.length==1) return classObj[0];
        return classObj;
    }
    //getClass
    var $_class = new $_get;
    //marqueeArea
    function roll(o){
        var _this = this;
        this.obj = o;
        this.i=0;
        this.timeId = this.MaxH = null;
        o.onmouseover = function(){_this.stopEven()}
        o.onmouseout = function(){_this.autoTop()}
    }
    roll.prototype = {
        initial:function(){
            var c = this.obj.getElementsByTagName("li");
            //this.MaxH = c.length*c[0].offsetHeight;
            this.MaxH = this.obj.clientHeight;
            //this.obj.innerHTML+=this.obj.innerHTML
            this.obj.parentElement.appendChild(this.obj.cloneNode(true));
            this.autoTop();
        },
        autoTop:function(){
            var _this = this;
            this.i++;
            this.i=this.i>=this.MaxH?0:this.i
            this.obj.parentElement.style.top = "-" + this.i + "px";
            this.timeId = setTimeout(function(){_this.autoTop()},20);
        },
        stopEven:function(){
            clearInterval(this.timeId)    
        }
    }
     
    //上面的代码是从我写的文件里面抽出来的关于这个问题的部分代码，都是些个人的编写习惯求高手指点，真心求教
    //initial
    var pc =  $_get("mq-con","ul"),quy = new roll(pc).initial();quy = null;
    </script>
    </body>
    </html>
    你原来写的是ok的 小改了一下