首页 > 其他分享 >自动滚动和循环内容DIV

自动滚动和循环内容DIV

时间:2024-10-05 21:44:50浏览次数:8  
标签:滚动 translateY transform ul scrollingDiv 循环 对齐 DIV

<!-- HTML Version Declaration -->
<!DOCTYPE html>
<!-- HTML Root Element -->
<html>
<!-- HTML Head Section -->

<head>
    <!-- HTML Document Title -->
    <title>This is Title</title>
    <style type="text/css" media="all">
        #scrollingDiv {
            height: 400px;
            overflow: hidden;
        }

        #scrollingDiv ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            animation: scroll 10s infinite;
        }

        @keyframes scroll {
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(-50%);
            }

            50% {
                transform: translateY(-100%);
            }

            75% {
                transform: translateY(-150%);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div id="scrollingDiv">
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
            <li>内容5</li>
            <li>内容6</li>
        </ul>
    </div>
    <script>

        window.onload = function () {
            var scrollingDiv = document.getElementById("scrollingDiv");
            var ul = scrollingDiv.querySelector("ul");
            var liHeight = ul.querySelector("li").offsetHeight;
            var totalHeight = liHeight * ul.children.length;
            scrollingDiv.style.height = liHeight + "px";
            ul.style.height = totalHeight + "px";
        }
    </script>

</body>

</html>

 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>marquee</title>
</head>
 
<body>
    <marquee direction="up">我向上滚动</marquee>
    <hr>
    <marquee direction="down">我向下滚动</marquee>
    <hr>
    <marquee direction="left">我向左滚动</marquee>
    <hr>
    <marquee direction="right">我向右滚动</marquee>
    <hr>
    <marquee scrollamount="10">我速度很慢</marquee>
    <hr>
    <marquee scrollamount="100">我速度很快</marquee>
    <hr>
    <marquee scrolldelay="30">我小步前进。</marquee>
    <hr>
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
    <hr>
    <marquee loop="1">我滚动一次</marquee>
    <hr>
    <marquee loop="2">我滚动两次</marquee>
    <hr>
    <marquee loop="infinite">我无限循环滚动</marquee>
    <hr>
    <marquee behavior="alternate">我来回滚动</marquee>
    <hr>
    <marquee behavior="scroll">我单方向循环滚动</marquee>
    <hr>
    <marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee>
    <hr>
    <marquee behavior="slide">我只滚动一次</marquee>
    <hr>
    <marquee behavior="slide" direction="up">我向上只滚动一次</marquee>
    <hr>
    <marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
    <hr>
    <marquee width="600" height="50" bgcolor="red">我宽300像素,高30像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
    <hr>
    <marquee align="absbottom">绝对底部对齐</marquee>
    <hr>
    <marquee align="absmiddle">绝对中央对齐</marquee>
    <hr>
    <marquee align="baseline">底线对齐</marquee>
    <hr>
    <marquee align="bottom">底部对齐(默认)</marquee>
    <hr>
    <marquee align="left">左对齐</marquee>
    <hr>
    <marquee align="middle"> 中间对齐</marquee>
    <hr>
    <marquee align="right">右对齐</marquee>
    <hr>
    <marquee align="texttop">顶线对齐</marquee>
    <hr>
    <marquee align="top">顶部对齐</marquee>
</body>
 
</html>

 

<div style="transform: translate(0px, -44.2px); transition: ease-in; overflow: hidden;">
<div style="overflow: hidden;">
<div data-v-60fe2c19="" class="leftcon"><p data-v-60fe2c19="" style="border-bottom: medium; margin-right: 10px; color: rgb(255, 255, 255);"> </div>
</div>
</div>

 

标签:滚动,translateY,transform,ul,scrollingDiv,循环,对齐,DIV
From: https://www.cnblogs.com/emanlee/p/18448126

相关文章

  • 检测到您模板中包含文件超过50个,请检查是否存在互相包含导致无限循环的情况!
    在使用PBootCMS搭建网站时,如果遇到“检测到您模板中包含文件超过50个,请检查是否存在互相包含导致无限循环的情况”的错误,通常是因为模板文件中存在互相包含的情况。具体来说,可能是某个模板文件多次递归调用自身或其他模板文件,导致无限循环。解决方法检查模板文件定位问题修复......
  • Spring的循环依赖
    1.没有代理对象时的处理解决该问题的关键在于何时将实例化后的bean放进容器中,设置属性前还是设置属性后。现有的执行流程,bean实例化后并且设置属性后会被放进singletonObjects单例缓存中。如果我们调整一下顺序,当bean实例化后就放进singletonObjects单例缓存中,提前暴露引用,然后......
  • Codeforces Round 972 (Div. 2)
    一万一参赛,VP赛时136A.SimplePalindrome简单构造题。字母集是5,相同字母间一定构成若干回文子串。将相同字母排列在一起,则只有相同字母可以构成回文子串。显然,优先添加较少的字母即可。#include<bits/stdc++.h>usingnamespacestd;intT,n;chars[5]={'a','e','i......
  • Educational Codeforces Round 95 (Rated for Div. 2) G. Three Occurrences
    首先我们随机两个数组\(valA_x,valB_x\)。对于数组\(a\),记\(cnt\)表示\(a_i\)在前缀中出现的次数。若\(cnt\equiv0\mod3\),则\(b_i=valA_x\)若\(cnt\equiv1\mod3\),则\(b_i=valB_x\)若\(cnt\equiv2\mod3\),则\(b_i=valA_x\oplusvalB_x\)记\(pre_i\)表示\(b\)的前......
  • Codeforces Round 976 (Div. 2)
    C.BitwiseBalancing(C)先求出\(b-c\)的值,再考虑\(a\)的每个二进制位取0或1对答案的影响。vp的时候不知道为什么错了很多次。voidsolve(){llb,c,d;scanf("%lld%lld%lld",&b,&c,&d);if(b-c>d){printf("-1\n");retur......
  • Codeforces Round 976 (Div. 2)
    一万五参赛,VP赛时629(唐了,E没想出来)A.FindMinimumOperations简单题。注意特判,用除法统计答案即可。#include<bits/stdc++.h>usingnamespacestd;intT,n,k;intmain(){ scanf("%d",&T); while(T--){ scanf("%d%d",&n,&k); if(k==1||n......
  • Codeforces Round 976 (Div. 2) 题解
    CodeforcesRound976(Div.2)题解2020B一个常见的想法:开关灯=异或,虽然在这道题里没啥用注意到,第i盏灯的按钮被按的次数就是i的除它本身以外的因子个数而完全平方数的因子数为奇数,其他数的因子数为偶数点击查看更多信息#include<bits/stdc++.h>usingnamespacestd;voi......
  • Codeforces Round 975 (Div. 2)
    一万四参赛,VP赛时60A.MaxPlusSize一定选择最大值,若有多个最大值,优先选在奇数位置的最大值,后间隔涂上红色。#include<bits/stdc++.h>usingnamespacestd;constintN=105;intT,n,a[N];intmain(){ scanf("%d",&T); while(T--){ scanf("%d",&n); intm......
  • 【LGR-197-Div.2】洛谷 10 月月赛 I &「SFMOI」Round I(A,B,C)
    A.StrangeCakeGame对于小W,往下走最赚,对于小M往右走最赚,于是路线形成了个折线,直接对应竖坐标位置去看看横坐标符不符合要求即可#include<iostream>#include<algorithm>#include<string>#include<string.h>#include<queue>#include<deque>#include<math.h>#include<m......
  • 60_初识搜索引擎_上机动手实战基于scoll技术滚动搜索大量数据
    如果一次性要查出来比如10万条数据,那么性能会很差,此时一般会采取用scoll滚动查询,一批一批的查,直到所有数据都查询完处理完使用scoll滚动搜索,可以先搜索一批数据,然后下次再搜索一批数据,以此类推,直到搜索出全部的数据来scoll搜索会在第一次搜索的时候,保存一个当时的视图快照,之后只......