`

图片或文字上下左右滚动【JS向上滚动、JS向下滚动、JS向左滚动、JS向右滚动】【整理综合】

 
阅读更多

注:上下滚动时,单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动
       左右滚动时,单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动

一、上下滚动

1.显示的内容
<div id="demo" style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 100px; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
   <td id="demo1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>一</td>
          </tr>
          <tr>
            <td>二</td>
          </tr>
          <tr>
            <td>三</td>
          </tr>
        </table></td>
</tr>
<tr>
   <td id="demo2"></td>
</tr>
</table>
</div>

2.向上滚动JS

<SCRIPT>
var speed=30
var MyMarh=setInterval(Marqueeh,speed)
demo2.innerHTML=demo1.innerHTML
//原理是不断的向demoh2中填入demoh1中的内容,然后将已经看不见的清除
//用一个两行一列的表格,上一列再放一个装填有内容的表格,定义为demoh1,下一列是空的TD,定义为demoh2
//SPEED是用来控制速度的。
demo.onmouseover=function(){ clearInterval(MyMarh) }
demo.onmouseout=function(){ MyMarh=setInterval(Marqueeh,speed) }
function Marqueeh(){
if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
else{
   demo.scrollTop++
}
}
</SCRIPT>

3.向下滚动JS

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
var MyMar=setInterval(Marquee,speed)


demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
   demo.scrollTop+=demo2.offsetHeight
else{
   demo.scrollTop--
}
}
</script>

二、左右滚动

1.显示内容

<div id="demo" style="overflow:hidden;height:100px;width:200px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1"><table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>一</td>
      <td>二</td>
      <td>三</td>
    </tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>

2.向左滚动JS

<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
else{
   demo.scrollLeft++
}
}
</script>

3.向右滚动JS

<script> 
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){ 
if(demo.scrollLeft<=0) 
   demo.scrollLeft+=demo2.offsetWidth 
else{ 
   demo.scrollLeft-- 


</script>

分享到:
评论

相关推荐

    js图片向上下左右滚动的代码 图片向上滚动js代码

    在JavaScript中,实现图片上下左右滚动的效果是一种常见的动态效果,常用于网站的广告展示或页面美化。本示例主要讲解如何使用JavaScript实现图片的上下滚动。 首先,我们来看标题和描述中提到的关键点:`js图片向...

    实用上下左右滚动的跑马灯JS

    综上所述,实现"实用上下左右滚动的跑马灯JS"涉及到JavaScript基础、DOM操作、CSS样式、定时器、动画效果、方向控制、事件监听和代码优化等多个方面的知识。通过深入理解这些知识点,并结合实际的跑马灯.html文件...

    JS图片无缝、平滑、上下左右滚动

    在这个案例中,JS主要负责处理图片的动画效果,即让图片能够按照设定的方向(上下或左右)平滑滚动。 一、HTML结构 HTML(超文本标记语言)是网页的基础,用于定义页面内容和结构。在`js3.html`文件中,我们可能会...

    js左右滚动代码

    它包含了向上滚动(`ISL_GoUp`)和向下滚动(`ISL_GoDown`)的功能,同时支持自动播放和手动停止滚动。其中,`Speed`和`Space`变量分别控制了滚动速度和每次移动的距离,而`PageWidth`则定义了滚动区域的宽度。 #### ...

    DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性

    例如,向下滚动可能通过不断增加`top`值来实现,而向左滚动则会修改`left`值。同时,考虑到高浏览器兼容性,这个示例可能采用了跨浏览器的JavaScript技术,如使用`window.onload`来确保脚本在DOM加载完成后执行,...

    jquery广告上下左右滚动效果

    - **向左/向右滚动**:类似地,改变`left`属性来实现水平滚动。注意,如果容器宽度有限,可能需要添加溢出隐藏(`overflow: hidden`),以便只显示可见部分。 5. **自动轮播**: 使用`setInterval()`函数定时触发...

    js动态可控制左右滚动图片

    向上滚动(向左滚动)时,调用`scrollLeft`。 在实际项目中,可能还需要考虑图片滚动的边界检测,避免图片滚动超出容器范围,以及平滑滚动效果的实现,这些可以通过CSS3的`transition`属性或者使用更高级的动画库如...

    Div块上下左右循环滚动

    向左滚动减少`left`值,向右滚动增加`left`值。同时,我们需要确保元素在滚动到边界后能够回到初始位置,从而实现循环滚动。 最后,`Images`目录可能包含了与滚动效果相关的图片资源,比如作为Div背景的图片,或者...

    JS简单判断滚动条的滚动方向实现方法

    //定义默认的向上滚与向下滚的边界 [removed] = [removed] = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop &gt; 80) {  //write your code } if ( oScrollTop &lt; 80) {  //write your ...

    jQuery 上下 左右 四方向 可控滚动 特效

    例如,向右滚动可以增加元素的`left`属性值,向下滚动则增加`top`属性值。同时,确保滚动量不会使元素超出其父容器的边界。 ```javascript function scrollRight() { var containerWidth = $('#container')....

    js幻灯片左右上下滚动

    反之,当到达第一张时,向下或向右滚动应跳转到最后。 6. **适配性与响应式设计**:为了适应不同设备和屏幕尺寸,幻灯片组件应具备响应式设计。这可能涉及到媒体查询(`@media`)、百分比布局或CSS Grid/Flexbox等...

    无缝滚动向上向下向左向右的代码

    无缝滚动 文字滚动 图片滚动 网页文字滚动代码 js图片滚动 无缝滚动向上向下向左向右的代码 四个方向

    js实现图片上下左右滚动代码[参考].pdf

    首先,我们来看向下滚动的代码部分。这部分代码创建了一个名为 `colee` 的 div 元素,设置了固定的高度和宽度,并且设置 `overflow:hidden` 来隐藏超出容器的部分。`colee1` 是包含图片的实际内容,而 `colee2` 是...

    jquery 图片滚动特效按钮控制图片自动上下滚动与左右滚动

    在本教程中,我们将探讨如何利用jQuery实现一个图片滚动特效,这个特效允许用户通过按钮控制图片自动上下或左右滚动。 首先,我们需要理解基本的jQuery结构。在HTML文件中,我们需要引入jQuery库,这可以通过在部分...

    javascript经典特效---jquery简单控制上下、左右四方向滚动的特效插件下载.rar

    3. **向左滚动**:通过减少元素的`left`值,元素将向左移动,增加`left`值则使其向右移动。 在实现这些特效时,通常会结合使用jQuery的事件监听器,例如`.on('click', function() {...})`,当用户点击某个按钮或...

    javascript实现手机触摸屏左右(上下)滚动(javascript感知滑屏方向)

    要实现左右或上下滚动,我们需要在`touchmove`事件中计算滑屏的方向。这通常通过比较连续两次触摸事件中的触摸点位置差值来实现。以下是一种简单的实现方法: ```javascript let startX, startY; document....

    js实现图片上下左右滚动代码参照.pdf

    这里我们将详细探讨如何使用JavaScript实现一个简单的图片向下滚动的效果。 首先,我们看到HTML部分创建了两个带有ID的`&lt;div&gt;`元素:`#colee`和`#colee1`。`#colee`是包含图片的滚动区域,它的样式设置了`overflow:...

    文字列表无缝向上滚动

    【文字列表无缝向上滚动】是一种常见的网页动态效果,它能够为用户提供流畅的视觉体验,尤其在展示大量文本信息时,如新闻更新、公告或者产品列表等。这种效果通过编程技术实现,使得文字列表在到达顶部时不是突然...

    js文字无缝滚动(可控制方向)

    例如,你可以创建两个按钮,分别表示“向上滚动”和“向下滚动”,并绑定事件监听器来改变`setInterval`调用的函数。 总的来说,实现JavaScript文字无缝滚动并且可控制方向,需要结合HTML结构、CSS样式和JavaScript...

    图片不间断无缝滚动 上下左右4种都有

    js jquery图片不间断无缝滚动代码 向上 向下 向左 向右滚动 js 文件适合大部分程序员使用,基本的滚动功能

Global site tag (gtag.js) - Google Analytics