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

最新推荐文章于 2023-05-30 21:05:32 发布
最新推荐文章于 2023-05-30 21:05:32 发布
阅读量3.8k 收藏
点赞数
分类专栏： css js 文章标签： scroll function div html border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdefg198/article/details/6697182
版权
js 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
css
29 篇文章 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="#">宋山木的“温柔强奸论”能成立吗？</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");  
        //alert(scroll_begin.scrollWidth);  
        var scroll_end = document.getElementById("scroll_end");  
        var scroll_div = document.getElementById("scroll_div");  
        if (scroll_begin.scrollWidth > parseInt(document.body.clientWidth) / 2) {  
            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.onmouseover = function() { clearInterval(MyMar) }  
            scroll_div.onmouseout = 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>



cdefg198
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 实现文字上下滚动效果（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 996
JavaScript 实现文字上下滚动效果（附完整源码）
JS JavaScript 实现文字上下滚动效果
qq_45916727的博客
10-16 3722
这篇文章主要为大家介绍了js实现文字滚动效果，类似于中奖记录信息滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现文字的左右滚动
热门推荐
二大
07-29 1万+
p{position: absolute;left: 125px; top: 100px;} var tag = 0;//标志，判断对象当前位置是在最左还是最右，注意这里必须设置为全局变量，否则在执行setTimeOut方法会重置为0，使得无法再向右返回 //移动文字 function moveWord(){ var resource = docume
js实现文字上下滚动(到底回到顶部重复滚动)
逍遥的码农的博客
02-09 1369
直接贴代码 <html> <body> <head> <style> #scrolldiv { width: 200px; height: 100px; overflow: hidden; } ul{ list-style: none; } </style> &l
JS中如何实现文字横向滚动(向右滚动)
2301_76677965的博客
05-30 1450
那么我们就应该先存储最后一个字符，然后再把它去掉。想到这里，我们不禁联想到Array对象的。
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
12-12
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) body {font-size:12px;} .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px...
js 实现无缝滚动 兼容IE和FF
12-10
在JavaScript中实现无缝滚动是一种常见的动态效果，常用于新闻滚动条、广告轮播等场景。以下将详细解析如何实现这个效果并确保兼容IE和Firefox浏览器。 1. **基本原理**： - **设定容器尺寸**：首先，我们需要一个...
js新闻上下滚动效果（兼容IE和ff）
01-19
在本示例中，"js新闻上下滚动效果（兼容IE和ff）"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果，这种效果常见于新闻网站，能够展示多条新闻，同时保持页面空间的有效利用。这个效果不仅在现代...
【仅适合初学者】js 实现 文字上下滚动
05-16
jQuery 实现文字上下滚动
js无缝滚动制作js文字无缝滚动
12-15
js无缝滚动制作js文字无缝滚动和js图片无缝滚动 js文字切换特效制作焦点文字带滤镜切换效果 js文字特效制作js文字闪烁与文字变色效果
js文字间隔滚动上下滚动
08-02
js文字间隔滚动上下滚动
文字左右滚动的js代码整理-经测试非常好用
10-31
文字左右滚动的js代码整理-经测试非常好用！此代码可用作网页上的新闻展示，或者公告栏，只需调整一下数值就可满足很多企业站的需求.对于网页前端设计师来说是不可缺少的代码之一！
js实现可控制左右方向的无缝滚动效果
10-22
主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮，控制图片滚动的方向，感兴趣的小伙伴们可以参考一下
js文字横向滚动特效
10-23
主要介绍了js文字横向滚动特效，实现过程很简单，文字在某块区域内横向无间隙滚动，感兴趣的小伙伴们可以参考一下
兼容firfox,ie8+的上下走马灯（效果同ie marquee）
fzf474577969的专栏
12-24 760
#taskli { overflow:hidden; height: 210px; width: 220px; } #taskId{ text-align: left; } #taskId p,#taskIds p { list-style-type: left; float: left; text-align: left; border-bottom:1px dashed
jq文字上下无缝滚动--没注意看--挺简单的
li3196672779的博客
06-16 5009
*{ margin: 0px; padding: 0px; } .box{ width: 500px; height: 50px; line-height: 50px; text-align: center; background: blue; border: 2px solid red; margin: 0px
文字横向滚动效果
多啦的博客
11-03 4947
利用JS和CSS3两种方法实现文字横向滚动效果
vue+java 从 localhost://8080 跳转 http://10.112.98.121:8081/api/ff/login
最新发布
12-19
对于vue+java从localhost://8080跳转到...```javascript window.location.href = 'http://10.112.98.121:8081/api/ff/login'; ``` 这将会在当前窗口中打开一个新的URL，并跳转到指定的地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值