首页 > 其他分享 >html滚动示例

html滚动示例

时间:2023-08-04 11:57:45浏览次数:40  
标签:文字 function 滚动 示例 height html 测试 children first

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>滚动测试</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="dvScroll" style="height:210px;overflow-y: hidden;">
        <div class="list_item">1测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">2测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">3测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">4测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">5测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">6测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">7测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">8测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">9测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">10测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">11测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">12测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">13测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">14测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">15测试文字测试文字测试文字测试文字测试文字测试文</div>
    </div>
</body>
<script>
    $(function () {
        setInterval(function () {
            scroll($(".dvScroll"), 5)
        }, 2000);
    })

    //数据滚动
    function scroll(parent, maxCount) {
        var children = $(parent).children()
        if (children.length > maxCount) {
            var first = $(children).first();
            var height = first.height()
            first.animate({
                height: 0
            }, 500, function () {
                $(parent).append(first.css('height', height))
            });
        }
    }
</script>

</html>

  

标签:文字,function,滚动,示例,height,html,测试,children,first
From: https://www.cnblogs.com/5tomorrow/p/17605495.html

相关文章

  • HTML5 VideoAPI,打造自己的Web视频播放器
    本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。一、基础知识1.用法<video src="./video/mv.mp4"></video>注意:audio和video元素必须同时包含开始和结束标签,不能使用<audio/>这样的空元素语法......
  • NET7下的WEB API示例
    NET7下的WEBAPI示例 [Route("api/[controller]")][ApiController]publicclassShopADController:ControllerBase{privatereadonlyIRepository<Model.ShopAD,int>_shopAD;publicShopADController(IRepository&l......
  • 【Azure K8S | AKS】在AKS集群中创建 PVC(PersistentVolumeClaim)和 PV(PersistentVol
    问题描述在AKS集群中创建PVC(PersistentVolumeClaim)和PV(PersistentVolume)示例 问题解答在AzureKubernetesService(AKS)的官方网站中,关于存储的选项介绍中,并没有具体的yaml实例来创建PV,PVC。特别是使用自定义的Disk的情况。本文将根据以上图片中的AzureManagedDisk+......
  • 网络工具示例
    如指定IP包长度大于100:tcpdump-ieth0-n'ip[2:2]>100'traceroute使用oot@zh-hz-hr-ygyradius~]#traceroute-I-p2000192.168.1.1tracerouteto192.168.1.1(192.168.1.1),30hopsmax,60bytepackets1gateway(192.168.3.250)3.987ms4.331......
  • HTML总结笔记
    HTML总结学习来源:https://www.bilibili.com/video/BV1x4411V75C?p=11&vd_source=c406cec6bb9d5441fcb8903f9c8242d5基本标签<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级......
  • 解决pycharm书写html有注释的情况下,会有多余空格情况
    一、情况截图(看着有点不舒服)二、解决方法三、验证......
  • web前端技能方法总结(css、js、jquery、html)(2)
    创建链接块display:block;列表样式在一个无序列表中,列表项的标志(marker)是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。要修改用于列表项的标志类型,可以使用属性list-style-type:ul{list-style-type:square;}1上面的声明把......
  • 多语言API接口接入电商平台获得商品快递费用源代码演示示例
     商品快递费用API接口的作用是通过调用接口获取特定商品的快递费用信息。具体而言,该接口可以提供以下功能和作用:实时获取快递费用:通过API接口可以实时查询不同快递公司对于指定商品的运费费用。用户可以根据商品的重量、尺寸、寄送地址等信息,调用接口获取最准确的快递费用。便于物......
  • HtmlAgilityPack 网页数据抓取基础应用
    1vardoc=newHtmlAgilityPack.HtmlDocument();2stringhtml="";3doc.LoadHtml(html);4Func<HtmlAgilityPack.HtmlNodeCollection,string,Dictionary<string,string>,bool,List<Htm......
  • HTML编辑器 图片粘贴上传,实现图文粘贴,图片自动上传
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......