无线滚动（向左或者向上）

已于 2022-06-27 17:40:32 修改
阅读量153 收藏
点赞数
文章标签： 前端 javascript css
于 2022-06-27 17:21:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43993776/article/details/125487956
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0}
        li{list-style: none}

        .container{ width: 300px; overflow: hidden; margin: 200px auto; }
        .container .wrap{ display: flex; }
        .container .wrap .item{ flex: 1; }
        .container .wrap .item:not(:first-child){ margin-left: 20px; }
        .container .wrap .item img{ display: block; width: 120px; height: 120px; }
    </style>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="wrap">
            <div class="item">
                <img src="https://img95.699pic.com/photo/50237/9672.jpg_wh300.jpg" alt="">
            </div>
            <div class="item">
                <img src="https://img95.699pic.com/photo/50178/6553.jpg_wh300.jpg" alt="">
            </div>
            <div class="item">
                <img src="https://img95.699pic.com/photo/50177/8824.jpg_wh300.jpg" alt="">
            </div>
            <div class="item">
                <img src="https://img95.699pic.com/photo/50238/6869.jpg_wh300.jpg" alt="">
            </div>
            <div class="item">
                <img src="https://img95.699pic.com/photo/50175/6478.jpg_wh300.jpg" alt="">
            </div>
            <div class="item">
                <img src="https://img95.699pic.com/photo/50177/2113.jpg_wh300.jpg" alt="">
            </div>
        </div>
    </div>

    <script>
        // 复制元素
        $(".container .wrap .item").clone().appendTo($(".container .wrap"));
        $(".container .wrap").css('width', $(".container .wrap .item").width() * $(".container .wrap .item").length + parseInt($($(".container .wrap .item").get(1)).css("marginLeft")) * ($(".container .wrap .item").length - 1))

        var timer = null;
        var num = 0;
        timer = setInterval(function () {
            num++;
            $(".container").scrollLeft(num);

            if($(".container").scrollLeft() >= $(".container .wrap").width() / 2 + 10) {  // 下面说的注意前减后加指的就是此处加10， 并且加的这个10正好是marginLeft的一半
                num = 0;
            }
        }, 40)
    </script>
</body>
</html>

无线滚动需要注意的是：复制一份子元素，滚动到自身一半的时候， 拉回到原来的位置
注意：
1、前减后加
2、宽度或者高度除以2
3、后加的时候要加一半 marginLeft
如果说没有margin，后面的就不加了，即为元素本身的宽高除以2

weixin_43993776
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html文本从右到左,js文字从右往左无限滚动 支持PC，移动端
weixin_28718641的博客
06-20 1703
一、概述：关于文字滚动插件太多，PC跟移动端使用来能同时兼容的并不多，基于以上原因自己还是动手写了一个单纯的文字从右向左滚动的DEMO，思路来源于上一篇《小程序 文字从右往左无限滚动》。一个页面支持多个滚动。二、实现过程：1、解决思路：如果宽度滚动小于文字内容宽度，则滚动，反之停止。默认是只有一条标签，但是在实现过程中需要最好需要二条来实现，所以js会自动添加一条相同的内容。滚动的时候最好的方法不...
JS 无线滚动的瀑布流
boonyaxnn的博客
04-18 213
1、html代码部分 <div class="box"></div> 2、css样式部分 * { margin: 0; padding: 0 } .box { margin: 0 auto; position: relat...
html css动画效果向左循环滚动
weixin_53603040的博客
11-12 1230
动画效果向左循环滚动 Css部分 .ad-all{ overflow: hidden; height: 100px; } .ad-ul{ width:200%; list-style: none; animation-name: move;//名称 animation-duration: 10s;//时间 animation-iteration-count:infinite;//无限循环 animation-timing-function: linear; } .ad-ul-li{ width: 240px
使用swiper实现无限滚动
最新发布
weixin_55932347的博客
05-17 530
（使用 vue3-seamless-scroll 插件也是可以实现的，详细见。
滚动加载（无线滚动）
WBL612195的博客
11-01 1050
滚动加载事件(无限滚动)
轮播无限向上滚动
ya_nan_zhang的博客
05-28 367
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.9.0.js" type="text/javascript" c...
Vue中如何进行滚动加载与无限滚动？
it_xushixiong的博客
06-12 4568
在Vue中，我们可以使用vue-infinite-loading插件和Intersection Observer API来实现滚动加载和无限滚动。使用vue-infinite-loading插件非常简单，只需要使用它提供的API即可。使用Intersection Observer API需要一些JavaScript基础知识，但它的性能更好，适用于复杂的Web应用程序。无论使用哪种方法，我们都需要注意滚动加载和无限滚动可能会影响页面性能和用户体验，所以需要谨慎使用。
图片不断向左循环滚动js特效代码
09-12
"图片不断向左循环滚动js特效代码"就是一种常见的网页动态效果，它利用JavaScript语言实现，使得一组图片在网页上持续不断地向左移动，形成类似滚动的视觉效果。这种效果常用于网站的轮播图、广告展示或者新闻滚动等...
无线滚动插件无线滚动插件无线滚动插件
07-12
无线滚动插件无线滚动插件无线滚动插件
unity ugui 无线滚动案例
08-01
6. **事件处理**：在无线滚动案例中，可能需要监听ScrollRect的滚动事件，以便在用户滚动到特定位置时进行相应的逻辑处理，如加载新的内容或者更新数据。 7. **性能优化**：无线滚动需要处理大量可视化的UI元素，...
ios-滑动视图的无线滚动.zip
07-11
总的来说，"ios-滑动视图的无线滚动.zip"这个资源提供了实现无限滚动视图的一个实例，其中的"ChangePic"封装类可能是关键部分，通过它来管理和更新滚动视图中的内容，实现平滑的无线滚动效果。在实际开发中，我们...
基于UGUI的无线动态滚动列表
10-25
本项目“基于UGUI的无线动态滚动列表”旨在实现一个无限滚动的列表，这种功能常见于游戏中的商店、排行榜或者角色选择界面。 无线滚动列表是一种可以自动加载更多内容的滚动视图，当用户滚动到列表底部时，会自动...
【Vue】实现无限滚动加载
热门推荐
NineWaited的博客
08-17 1万+
滚轮到底实现无限加载，内容包括ElementUI的InfiniteScroll，包括scrollTop，clientHeight和scrollHeight
无缝滚动js（左方向）
u
03-13 280
图片滚动（左方向） #demo { background: #FFF; overflow:hidden; width: 950px; margin:0 auto; } #demo img { border: 3px solid #EE7600; padding:1px; margin:3px; float: left; } #indemo { float:
如何使用CSS实现一个无限滚动效果（Infinite Scroll）？
官方推荐
08-18 6060
如何使用CSS实现一个无限滚动效果（Infinite Scroll）？
向左无缝滚动
whh_lydia的博客
07-08 461
1、html部分： 2、css部分： 3、js部分： 注：demo.scrollLeft指的是滚动的距离，demo1.offsetWidth取的是demo1的宽度，offsetWidth比width要更精确 x-=1 就是x=x-1。offsetWidth、scrollLeft等第二个字母要大写以及容器宽度要大，否则没有滚动效果。
无限循环滚动，从右到左，一次一条
xiaoqiang3146的专栏
03-23 2000
因为marquee里面的元素会跟在第一个显示的后面，而且当宽度增加到屏幕宽度的时候，容易出现错位显示。 所以通过setInterval()方法进行循环添加，添加一条marquee ，循环完毕，删除这一条marquee 。 如果只改变marquee 里面的元素，而不新添加marquee的话，显示会在上一条显示的末尾位置开始显示，而不是右侧的初始位置显示下一条数据。 初始化调用jump(),是为
文字向左无缝滚动
金双林
08-04 3073
下面是文字向左无缝滚动的实例，仅供参考。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&...
js 控制table无线滚动
04-25
您好，您可以使用CSS样式控制表格滚动条的样式，同时使用JavaScript监听表格的滚动事件来控制表格的滚动。 具体的实现方式为： 1. 设置CSS样式控制表格的滚动条样式： table { overflow-y:scroll; display:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值