js文字上下滚动+左右滚动兼容FF/IE

最新推荐文章于 2020-12-25 10:20:50 发布

86y

最新推荐文章于 2020-12-25 10:20:50 发布

阅读量129

点赞数

分类专栏： JS 文章标签： IE JavaScript CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/charrys/article/details/83839943

版权

JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

我也是最近因为要做这种效果所以找了一下，很多都没有用，有的滚动一半就不滚了！以下是有用的所以收藏了，大家也可以参考一下。

直接贴代码了:

上下滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
<HTML xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<TITLE>文字上下滚动</TITLE>  
<META http-equiv=Content-Type content="text/html;charset=utf-8">  
<STYLE type=text/css media=screen>  
*{margin:0;padding:0;font-size:12px;}   
a{color:#333;text-decoration:none}   
a:hover{color:#901d22;text-decoration:underline}   
.clear{clear:both;font-size:0;line-height:0;height:0}   
SPAN.darkred{font-size:14px;color:#933}   
#search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px}   
#commend{width:720px;color:#fff}   
#commend a{color:#333}   
.scrollNews{padding-TOP:4px;position:relative}   
#newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px}   
.scrollNews div{LEFT:507px;position:absolute;}   
.scrollNews a{CURSOR:pointer}   
.scrollNews IMG{width:25px;height:8px;background:#000;}   
</STYLE>  
</head>  
<body>  
<div id="new_list" style="display:none;">  
<h6><a href="#">宋山木的“温柔adf论”能成立吗？</a></h6>  
<h6><a href="#">坐在中国最拥挤的火车上</a></h6>  
<h6><a href="#">前卫美女拍比基尼婚纱照</a></h6>  
<h6><a href="#">中南海保镖这么练出来的</a></h6>  
<h6><a href="#">围观景区冬日人体彩绘秀</a></h6>  
<h6><a href="#">贷款修路有尽 为何缴费还贷不止？</a></h6>  
<h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>  
<h6><a href="#">辛酸中的感动：为那些骑摩返们</a></h6>  
<h6><a href="#">高房价 让多少未婚女孩当了小三？</a></h6>  
<h6><a href="#">内衣模特大赛照！真有料</a></h6>  
</div>  
<div id=search>  
  <div id=commend>  
    <div class=scrollNews>  
      <H3 id=newscommend></H3>  
      <div style="TOP:3px"><a id="pre"><IMG src=""></a></div>  
      <div style="TOP:15px"><a id="next"><IMG src=""></a></div>  
    </div>  
  </div>  
</div>  
<SCRIPT type="text/javascript">  
function scrollnews(){   
            var htext=document.getElementById("new_list").getElementsByTagName("h6");   
            var text_holder=document.getElementById("newscommend");   
            var oFrag=document.createDocumentFragment();   
            oFrag.innerHTML="";   
            for(var i=0;i<htext.length;i++){   
                oFrag.innerHTML+=htext[i].innerHTML+"  ";   
                if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){   
                    oFrag.innerHTML+="<br/>";   
                }   
            }   
            text_holder.innerHTML=oFrag.innerHTML;   
        }   
  
        function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll){   
            this.Speed=10;   
            this.Timeout=timeout;   
            this.stopscroll=false;   
            this.isSmoothScroll=isSmoothScroll;   
            this.LineHeight=20;   
            thisthis.NextButton=this.$(btnNext);   
            thisthis.PreviousButton=this.$(btnPrevious);   
            thisthis.ScrollContent=this.$(content);   
            this.ScrollContent.innerHTML+=this.ScrollContent.innerHTML;   
            if(this.PreviousButton){   
                thisthis.PreviousButton.οnclick=this.GetFunction(this,"Previous");   
                thisthis.PreviousButton.οnmοuseοver=this.GetFunction(this,"MouseOver");   
                thisthis.PreviousButton.οnmοuseοut=this.GetFunction(this,"MouseOut");   
            }   
            if(this.NextButton){   
                thisthis.NextButton.οnclick=this.GetFunction(this,"Next");   
                thisthis.NextButton.οnmοuseοver=this.GetFunction(this,"MouseOver");   
                thisthis.NextButton.οnmοuseοut=this.GetFunction(this,"MouseOut");   
            }   
            thisthis.ScrollContent.οnmοuseοver=this.GetFunction(this,"MouseOver");   
            thisthis.ScrollContent.οnmοuseοut=this.GetFunction(this,"MouseOut");   
            if(autoStart){   
                this.Start();   
            }   
        }   
        ScrollText.prototype={   
            $:function (element){   
                return document.getElementById(element);   
            },   
            Previous:function (){   
                this.stopscroll=true;   
                this.Scroll("up");   
            },   
            Next:function (){   
                this.stopscroll=true;   
                this.Scroll("down");   
            },   
            Start:function (){   
                if(this.isSmoothScroll){   
                    this.AutoScrollTimer=setInterval(this.GetFunction(this,"SmoothScroll"),this.Timeout);   
                } else{   
                    this.AutoScrollTimer=setInterval(this.GetFunction(this,"AutoScroll"),this.Timeout);   
                }   
            },   
            Stop:function (){   
                clearTimeout(this.AutoScrollTimer);   
                this.DelayTimerStop=0;   
            },   
            MouseOver:function (){   
                this.stopscroll=true;   
            },   
            MouseOut:function (){   
                this.stopscroll=false;   
            },   
            AutoScroll:function (){   
                if(this.stopscroll){   
                    return;   
                }   
                this.ScrollContent.scrollTop++;   
                if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){   
                    this.ScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Speed);   
                } else{   
                    if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){   
                        this.ScrollContent.scrollTop=0;   
                    }   
                    clearTimeout(this.ScrollTimer);   
                }   
            },   
            SmoothScroll:function (){   
                if(this.stopscroll){   
                    return;   
                }   
                this.ScrollContent.scrollTop++;   
                if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){   
                    this.ScrollContent.scrollTop=0;   
                }   
            },   
            Scroll:function (direction){   
                if(direction=="up"){   
                    this.ScrollContent.scrollTop--;   
                } else{   
                    this.ScrollContent.scrollTop++;   
                }   
                if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){   
                    this.ScrollContent.scrollTop=0;   
                } else if(parseInt(this.ScrollContent.scrollTop)<=0){   
                    this.ScrollContent.scrollTop=parseInt(this.ScrollContent.scrollHeight)/2;   
                }   
  
                if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){   
                    this.ScrollTimer=setTimeout(this.GetFunction(this,"Scroll",direction),this.Speed);   
                }   
            },   
            GetFunction:function (variable,method,param){   
                return function (){   
                    variable[method](param);   
                }   
            }   
        }   
    </SCRIPT>  
    <SCRIPT type="text/javascript">  
        scrollnews();   
        var scroll1=new ScrollText("newscommend","pre","next",true,2500,false);   
    </SCRIPT>  
</body>  
</HTML>

左右滚动

<!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=gb2312" />
<title>JS实现文字无间隙滚动代码</title>
<style type="text/css">
body{font-size:12px;}
.sqBorder {width:938px;margin:0px auto;padding:10px;border:1px #91CD5A solid;background:#DAEEB5;}
.scroll_div {width:936px;margin:0 auto;overflow: hidden;white-space: nowrap;}
.scroll_div a:hover{color:#FF0000}
.scroll_div a{color:#000;margin-right:5px;}
.scroll_div a img{border:none; vertical-align:middle;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
</style>
</head>
<body>
<script language="javascript">
function ScrollImgLeft(){
var speed=30
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
      scroll_div.scrollLeft-=scroll_begin.offsetWidth
    else
      scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<div style="text-align:center">
  <div class="sqBorder">
    <!--#####滚动区域#####-->
    <div id="scroll_div" class="scroll_div">
      <div id="scroll_begin">
        <ul>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
          <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
        </ul>
      </div>
      <div id="scroll_end"></div>
    </div>
    <!--#####滚动区域#####-->
  </div>
  <script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</body>
</html>

来自（http://www.ok22.org/art_detail.aspx?id=114）可直接运行查看