javascript 横向和纵向滚动效果

最新推荐文章于 2024-06-24 15:18:02 发布

花郎

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签： javascript border class function table div

本文链接：https://blog.csdn.net/lzy_1515/article/details/3997050

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

常用的js滚动效果，其实html标记也有一种滚动的效果就是：<MARQUEE>滚动文字</MARQUEE>

不过这种效果有一个缺点就是留白太多了，开头和结尾不能连上，效果一般。

1.解决这个问题的方法那就是用js，先介绍一下横向的滚动；

            <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
              var speed3=25
              demo2.innerHTML=demo1.innerHTML
              function Marquee(){
              if(demo2.offsetWidth-demo.scrollLeft<=0)
              demo.scrollLeft-=demo1.offsetWidth
              else{
              demo.scrollLeft++
              }
              }
              var MyMar=setInterval(Marquee,speed3)
              demo.οnmοuseοver=function() {clearInterval(MyMar)}
              demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed3)}
            </SCRIPT>

2.下面是纵向滚动的代码段；

<div id="tz">
                          <table width="100%" border="0" cellspacing="10" cellpadding="0">
                                                        <tr>
                              <td>
                                <a href="#" target="_blank" class="black">·11111 src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-03-16]</span>
                              </td>
                            </tr>
                                                        <tr>
                              <td>
                                <a href="#" target="_blank" class="black">·22222 src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-03-16]</span>
                              </td>
                            </tr>
                                                        <tr>
                              <td>
                                <a href="#" arget="_blank" class="black">·33333 src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-03-09]</span>
                              </td>
                            </tr>
                                                        <tr>
                              <td>
                                <a href="#" arget="_blank" class="black">·44444 <img src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-03-09]</span>
                              </td>
                            </tr>
                                                        <tr>
                              <td>
                                <a href="#" arget="_blank" class="black">·55555 <img src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-02-25]</span>
                              </td>
                            </tr>
                                                        <tr>
                              <td>
                                <a href="#" target="_blank" class="black">·66666 <img src=/Images/Image/new.gif border=0 /></a>
                                <span class="blue2">[2009-02-24]</span>
                              </td>
                            </tr>
                                                      </table>
                        </div>
                        <script language="JavaScript">
                          tzHeight=200;
                          stopscroll=false;
                          with(tz){
                          style.width=190;
                          style.height=291;
                          style.overflowX="visible";
                          style.overflowY="hidden";
                          noWrap=true;
                          οnmοuseοver=new Function("stopscroll=true");
                          οnmοuseοut=new Function("stopscroll=false");
                          }
                          document.write('<div id="templayer2" style="position:absolute;z-index:1;visibility:hidden"></div>');
                          preTop=0;
                          currentTop=0;
                          function init(){
                          templayer2.innerHTML="";
                          while(templayer2.offsetHeight<tzHeight){
                        templayer2.innerHTML+=tz.innerHTML;
                        }
                        tz.innerHTML=templayer2.innerHTML+templayer2.innerHTML;
                        setInterval("scrollUp()",20);
                        }
                        document.body.οnlοad=init;
                        function scrollUp(){
                        if(stopscroll==true){
                        return;}
                        preTop=tz.scrollTop;
                        tz.scrollTop+=1;
                        if(preTop==tz.scrollTop){
                        tz.scrollTop=templayer2.offsetHeight-tzHeight;
                        tz.scrollTop+=1;
                        }
                        }
</script>

希望大家广泛交流！！！！！！！

花郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 横向和纵向滚动效果

常用的js滚动效果，其实html标记也有一种滚动的效果就是：滚动文字不过这种效果有一个缺点就是留白太多了，开头和结尾不能连上，效果一般。 1.解决这个问题的方法那就是用js，先介绍一下横向的滚动；
复制链接

扫一扫

专栏目录