JS之上下左右不间断滚动

最新推荐文章于 2023-11-10 12:46:32 发布
最新推荐文章于 2023-11-10 12:46:32 发布
阅读量1.2k 收藏 1
点赞数 2
分类专栏： WEB前端 文章标签： javascript 不间断 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netuser1937/article/details/53583461
版权 
<!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>增强版一页内上下左右滚动</title>
</head>
<body>
<p>注：上下滚动时，单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动 </p>
<p>左右滚动时，单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动 </p>
<p>一、上下滚动 </p>
<p>1.显示的内容 </p>
<p>2.向上滚动JS </p>
<div id="demot" style="overflow: hidden; widht: 200px; height: 60px; ">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="demot1">
      <table width="100%" height="120" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="30">一</td>
          </tr>
          <tr>
            <td height="30">二</td>
          </tr>
          <tr>
            <td height="30">三</td>
          </tr>
          <tr>
            <td height="30">四</td>
          </tr>
          <tr>
            <td height="30">五</td>
          </tr>
          <tr>
            <td height="30">六</td>
          </tr>
        </table>
        </td>
    </tr>
    <tr>
      <td id="demot2"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
function MarqueeToTop(){
var speed=30
var demo =document.getElementByIdx_x("demot");
var demo1 =document.getElementByIdx_x("demot1");
var demo2 =document.getElementByIdx_x("demot2");
var MyMarTop=setInterval(MarqueeTop,speed)
demo2.innerHTML=demo1.innerHTML
//原理是不断的向demoh2中填入demoh1中的内容，然后将已经看不见的清除
//用一个两行一列的表格，上一列再放一个装填有内容的表格，定义为demoh1，下一列是空的TD，定义为demoh2
//SPEED是用来控制速度的。
demo.οnmοuseοver=function(){ clearInterval(MyMarTop) }
demo.οnmοuseοut=function(){ MyMarTop=setInterval(MarqueeTop,speed) }
function MarqueeTop(){
if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
else{
   demo.scrollTop++
}
}
}
MarqueeToTop()
</SCRIPT>
<p>3.向下滚动JS </p>
<div id="demod" style="overflow: hidden; widht: 200px; height: 100px; ">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="demod1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="30">一</td>
          </tr>
          <tr>
            <td height="30">二</td>
          </tr>
          <tr>
            <td height="30">三</td>
          </tr>
          <tr>
            <td height="30">四</td>
          </tr>
          <tr>
            <td height="30">五</td>
          </tr>
          <tr>
            <td height="30">六</td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td id="demod2"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
function MarqueeToDown(){
var speed=30
var demo = document.getElementByIdx_x("demod");
var demo1 = document.getElementByIdx_x("demod1");
var demo2 = document.getElementByIdx_x("demod2");
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
var MyMarDown=setInterval(MarqueeDown,speed)
demo.οnmοuseοver=function() {clearInterval(MyMarDown)}
demo.οnmοuseοut=function() {MyMarDown=setInterval(MarqueeDown,speed)}
function MarqueeDown(){
if(demo1.offsetTop-demo.scrollTop>=0)
   demo.scrollTop+=demo2.offsetHeight
else{
   demo.scrollTop--
}
}
}
MarqueeToDown()
</script>
<p>二、左右滚动 </p>
<p>1.显示内容 </p>
<p>2.向左滚动JS</p>
<div id="demol" style="overflow:hidden;height:100px;width:200px;">
  <table cellpadding="0" cellspace="0" border="0">
    <tr>
      <td id="demol1"><table width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
          </tr>
        </table></td>
      <td id="demol2"></td>
    </tr>
  </table>
</div>
<p>3.向右滚动JS</p>
<div id="demor" style="overflow:hidden;height:100px;width:200px;">
  <table cellpadding="0" cellspace="0" border="0">
    <tr>
      <td id="demor1"><table width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
          </tr>
        </table></td>
      <td id="demor2"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
function MarqueeToLeft(){
var speed=30
var demo =document.getElementByIdx_x("demol");
var demo1 =document.getElementByIdx_x("demol1");
var demo2 =document.getElementByIdx_x("demol2");
var MyMarLeft=setInterval(MarqueeLeft,speed)
demo2.innerHTML=demo1.innerHTML
demo.οnmοuseοver=function() {clearInterval(MyMarLeft)}
demo.οnmοuseοut=function() {MyMarLeft=setInterval(MarqueeLeft,speed)}
function MarqueeLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
else{
   demo.scrollLeft++
}
}
}
MarqueeToLeft()
</script>
<script type="text/javascript"> 
function MarqueeToRight(){ 
  var speed=30
  var demo =document.getElementByIdx_x("demor");
  var demo1 =document.getElementByIdx_x("demor1");
  var demo2 =document.getElementByIdx_x("demor2");
  var MyMarRight=setInterval(MarqueeRight,speed)
  demo2.innerHTML=demo1.innerHTML
  demo.οnmοuseοver=function() {clearInterval(MyMarRight)} 
  demo.οnmοuseοut=function() {MyMarRight=setInterval(MarqueeRight,speed)}
  function MarqueeRight(){ 
 if(demo.scrollLeft<=0) 
    demo.scrollLeft+=demo2.offsetWidth 
 else{ 
    demo.scrollLeft-- 
 } 
  } 
}
MarqueeToRight()
</script>
</body>
</html>

相思比梦长
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 实现文字上下滚动效果（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 1083
JavaScript 实现文字上下滚动效果（附完整源码）
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
10-27
为了在网页中实现一个元素内容的无间断滚动，可以通过JavaScript来编写相应的脚本。在给定的文件信息中，提到了如何在IE和Firefox（火狐）浏览器中实现上下和左右循环滚动的效果。接下来将详细介绍这些知识点。 ...
文字不间断滚动(上下左右)实例代码
09-05
字不间断滚动(上下左右)实例代码，需要的朋友可以参考一下
JS无缝滚动（上、下、左、右）
情傷
03-22 753
<br />innerHTML:    设置或获取位于对象起始和结束标签内的 HTML<br /><br />scrollHeight: 获取对象的滚动高度。<br /><br />scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离<br /><br />scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离<br /><br />scrollWidth: 获取对象的滚动宽度<br /><br />offsetHeight: 获取对象相
js实现向上、向下、向左、向右无缝滚动
最新发布
想好了再写！
11-10 1867
js实现向上、向下、向左、向右无缝滚动
不间断滚动图片
weixin_33918114的博客
08-29 82
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv=
js实现上下无缝滚动（不卡顿）
想好了再写！
07-25 2246
效果图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
javascript实现不间断的向上（下、左、右）滚动
qq_35504206的博客
06-03 1296
元素布局：&lt;div class="box" id="scroll_left"&gt; &lt;div class="scroll_ele" id="scroll_ele"&gt; &lt;div class="item"&gt;9999999&lt;/div&gt; &lt;div cl
JavaScript实现上下滚动
hongyi1159的专栏
06-16 644
要实现的效果如下 这 个实现上下滚动应该挺简单的吧，要滚动的内容包含在一个层中，外面在包含个div设置了高和宽再设置overflow 为hidden 这样就基本 可以了，JavaScript的具体代码如下 使用了jquery框架 function objMove(mObj) {     this.Obj = $("#"+mObj.id);     var THIS = this;     this.Len = mObj.h;     this.moveL = mObj.m;  
jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐
05-24
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。 要实现这个效果，首先...
【仅适合初学者】js 实现 文字上下滚动
05-16
jQuery 实现文字上下滚动
js 实现 滚动的表格
03-31
js 实现 滚动的表格! 值得下载看看!资源免费,大家分享!!
JS上下无缝滚动效果JS上下无缝滚动效果
02-20
JS上下无缝滚动效果JS上下无缝滚动效果JS上下无缝滚动效果
不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
10-30
不间断滚动JS打包类（以下简称MSClass）是一款专门用于实现网页元素滚动效果的JavaScript库。它可以为网站开发者提供多种多样的滚动方式，并且能够适应不同的浏览器环境。该库不仅支持常见的上下左右滚动，还能实现...
不间断滚动
web开发自学
09-26 152
&lt;!--start------------------------------------------------------------&gt; 相对定位版不间断滚动：&lt;br&gt;&lt;br&gt; &lt;divstyle="width:200px;height:150px;overflow:hidden"&gt; &lt;tablecellspacing=0cellpaddi...
JS简洁经典滚动上下与左右
aiqixiao2017的博客
12-29 103
<style> #demo { overflow:hidden;height:150;width:90; background:#214984;color:#ffffff; } </style> <div id=demo> <div id=demo1> <img src="http://www.haao.c...
js实现文字上下滚动效果
Syspan
01-21 1130
不说了直接上代码，整体效果自己保存下来运行查看吧，整体不错的一款。 学习使用 <html> <head> <title>js实现文字上下滚动效果</title> <style type="text/css"> #flinks{width:500px;} /* 文字上下滚动 *...
不间断的滚动（横向/纵向）
fisea的专栏
11-08 540
 1、纵向不间断的滚动的页面代码：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
无间断JS滚动
yuanjun_05的专栏
01-16 224
[code] 无间断marquee a{text-decoration:none;color:3366cc} 1111111 2222222 3333333 4444444 5555555 6666666 7777777 8888888 9999999 var i=0 var s=null function fsnMarquee(...
swiperjs 左右联动上下滚动
09-03
swiperjs是一个非常流行的移动端轮播插件，可以用来实现左右联动和上下滚动的效果。 要实现左右联动上下滚动，我们首先需要在HTML中创建相应的结构。可以使用一个外层容器来包裹两个swiper实例，一个用来实现左右...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值