html超长图片、div向左固定移动效果

最新推荐文章于 2021-06-29 14:39:53 发布

镇杰。

最新推荐文章于 2021-06-29 14:39:53 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：超长图片向左移动 html超长div向左移动 html超长div向右移动

本文链接：https://blog.csdn.net/weixin_43452467/article/details/105865346

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
    .big-big-div{
        width: 100%;
        overflow:hidden;
    }
    .big-div{
        margin-left:0;
        position: relative;
        width: 4050px;
        height: 400px
    }
    .small-div{
        display: inline-block;
        height: 400px;
        width: 390px;
        margin-left: 10px;
    }

</style>
<body>

<div>
    <div class="big-big-div">
        <div class="big-div">
            <div class="small-div" style="background-color: yellow"></div>
            <div class="small-div" style="background-color: red"></div>
            <div class="small-div" style="background-color: saddlebrown"></div>
            <div class="small-div" style="background-color: #adadad"></div>
            <div class="small-div" style="background-color: deeppink"></div>
            <div class="small-div" style="background-color: tan"></div>
            <div class="small-div" style="background-color: teal"></div>
            <div class="small-div" style="background-color: thistle"></div>
            <div class="small-div" style="background-color: yellow"></div>
            <div class="small-div" style="background-color: yellowgreen"></div>
        </div>
    </div>
</div>

</body>
<script src="_INDEX_/jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
    $(function () {
        //超长div  每2秒向左移动400px  移动到第6次后就重新开始
        setInterval(function(){
            var res = parseInt($(".big-div").css("margin-left"));
            $(".big-div").animate({
                'margin-left':res>-2430 ? res-405 : 0
            });
        },2000);
    })
</script>
</html>

效果图：

没移动：

第一次移动：

第二次移动：

以此类推，直到第七次会重头开始......

镇杰。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html超长图片、div向左固定移动效果

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style> .big-big-div{ width: 100%;...
复制链接

扫一扫