js上下无缝滚动代码

我会带着你远行 2022-07-16 06:27 251阅读 0赞

上下滚动跟左右滚动的原理是一样的，但是有些细节需要注意，例如到底哪个div需要左悬浮，我会标注出来，但是我还是不太能弄明白float这个属性

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>上下无缝滚动</title>
        </head>
        <body>
            <style type="text/css"> #demo { background: #FFF; border: 3px solid black; height: 200px; width: 650px; overflow:hidden; } #demo img { } #indemo { width: 800%; border: 3px solid yellow; } #demo1 { //no float border: 3px solid blue; } #demo2 { //no float border: 3px solid red; } </style>
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="img/2.jpg" border="0"/></a>
    <a href="#"><img src="img/3.jpg" border="0"/></a>
    </div>
    
    <div id="demo2"></div>
    </div>
    </div>
    <script> var speed=10; var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetHeight-tab.scrollTop>=0) { //alert("tab2.offsetHeight"+tab2.offsetHeight+"\n"+ "tab.scrollTop"+tab.scrollTop+"\n"); tab.scrollTop++; } else{ //第一个恰好滑完 tab.scrollTop-=tab1.offsetHeight//返回至开头处 } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() { clearInterval(MyMar)}; tab.onmouseout=function() { MyMar=setInterval(Marquee,speed)}; </script>   
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 259 阅读

相关 JS图片滚动代码（无缝、平滑）

非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的应用

曾经终败给现在/ 2022年08月25日 09:18/ 0 赞/ 224 阅读

相关 js上下左右无限循环滚动,js上下滚动效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Typ

淡淡的烟草味﹌/ 2022年08月14日 03:42/ 0 赞/ 335 阅读

相关 js上下无缝滚动代码

上下滚动跟左右滚动的原理是一样的，但是有些细节需要注意，例如到底哪个div需要左悬浮，我会标注出来，但是我还是不太能弄明白float这个属性 <!DOCTYPE ht

我会带着你远行/ 2022年07月16日 06:27/ 0 赞/ 252 阅读

相关 js左右无缝滚动代码

无缝滑动图片的原理是用一个div1来装所有图片，再复制一个同样的div2，将这两个div放在一个indiv里面，外面再包一个div。通过控制最外层div的scollLeft实现

桃扇骨/ 2022年07月16日 06:27/ 0 赞/ 254 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 247 阅读

相关 js图片无缝滚动

> 虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉

爱被打了一巴掌/ 2022年03月25日 08:57/ 0 赞/ 390 阅读

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

我就是我/ 2021年09月03日 04:01/ 0 赞/ 470 阅读

相关常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scr

迈不过友情╰/ 2021年06月26日 16:06/ 0 赞/ 576 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 766 阅读