文字/图片向上无限循环滚动

最新推荐文章于 2022-01-18 10:30:32 发布

竹林湘

最新推荐文章于 2022-01-18 10:30:32 发布

阅读量2.3k

点赞数

分类专栏： ■ 前端开发 ——JavaScript特效

本文链接：https://blog.csdn.net/ai125073509/article/details/53355003

版权

■ 前端开发同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

——JavaScript特效

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字/图片向上无限循环滚动</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" language="javascript"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:139px;color:#333">
    <div id="demo1">
        <table border="1" cellpadding="0" >
            <tr>
                <td>1普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
            <tr>
                <td>2普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
            <tr>
                <td>3普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
            <tr>
                <td>4普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
            <tr>
                <td>5普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
            <tr>
                <td>6普通户型</td><td>7-10万元</td><td>144.2m²</td><td>全包</td><td>2016-11-25</td>
            </tr>
        </table>
    </div>
    <div id="demo2"></div>
</div>
   <script>
   var speed=50
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
   else{
   demo.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.onmouseover=function() {clearInterval(MyMar)}
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
   </script>
</body>

竹林湘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字/图片向上无限循环滚动

<!doctype html><html><head><meta charset="utf-8"><title>文字/图片向上无限循环滚动</title><script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" language="javascript"></script>
复制链接

扫一扫