首页 > 其他分享 >利用jQuery实现表格或者区域内数据的滚动展示效果

利用jQuery实现表格或者区域内数据的滚动展示效果

时间:2023-09-25 22:58:05浏览次数:30  
标签:jQuery function 滚动 表格 demo body MyMar1 change

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="g-index">
        <div class="right">
            <div >
                <ul id="demo">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                    <li>4444</li>
                    <li>5555</li>
                    <li>6666</li>
                </ul>
            </div>
           
        </div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    function change() {
        var body=$("#demo");
        body.append(body.children().first());
    }
    $(document).ready(function() {
        $("#demo").mouseenter(function () {
            clearInterval(MyMar1)
        });
        $("#demo").mouseleave(function () {
             MyMar1 = setInterval(change, 1000);
        });
    });

    var MyMar1=setInterval(change,1000);
</script>
</html>

  

标签:jQuery,function,滚动,表格,demo,body,MyMar1,change
From: https://www.cnblogs.com/zzc666/p/17729058.html

相关文章

  • 使用JavaScript实现无限滚动的方法
    前言在网页设计中,无限滚动是一种常见的交互方式,用户可持续地加载更多内容而无需刷新页面,提高用户体验。本文将介绍如何运用JavaScript实现无限滚动的效果,使网页能够自动加载更多数据,减轻用户加载新页的负担,为用户提供更好的访问体验。原理理解无限滚动的原理无限滚动的原理是当......
  • 基于jquery开发的Windows 12网页版
    预览https://win12.gitapp.cn首页代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="refresh"content="0;url=desktop.html"/><metaname=&q......
  • 记录返回上一页滚动条的位置
    scrollBehavior可以记录滚动条位置,也可以自己设定滚动条位置constrouter=createRouter({//createRouter返回一个router实例history:createWebHistory(),scrollBehavior:(to,from,savePosition)=>{if(savePosition){returnsavePosition;......
  • 表格透视图
    1、新增表格透视图选中清单》插入》数据透视表  选中字段可拖动   刷新视图  排序视图值选中总计右键排序 》选降序 ......
  • Jquery
    1.jquery就是一个js库2.jquery这个库向外暴露了jQuery或者$()这个函数。3.得到一个jquery对象letobj=$('#id')4.$()此时$代表函数,$.each()此时$代表对象。参数是选择器字符串返回一个jquery对象。注意只有jquery对象才能够调用val()...html()的jquery方法。5.jquery对象里面包含......
  • 短视频app源码,自动滚动条挡住 div内容
    短视频app源码,自动滚动条挡住div内容<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf......
  • 无限滚动
    html<divclass="slide-scroller-wrapper"> <ulref="refScroller"class="slide-scroller"@animationiteration="eventHandler.animation"> <liclass="slide-scroller-item">{{items[0]}}</......
  • layui table 表格上下左右事件
    //按键监听事件$(document).on('keydown','.layui-input',function(event){vartd=$(this).parent('td');varindex=td.index();vartr=td.parent('tr');v......
  • antd/fusion表格增加圈选复制功能
    背景介绍我们存在着大量在PC页面通过表格看数据业务场景,表格又分为两种,一种是antd/fusion这种基于dom元素的表格,另一种是通过canvas绘制的类似excel的表格。基于dom的表格功能丰富较为美观,能实现多表头、合并单元格和各种自定义渲染(如表格中渲染图形/按钮/进度......
  • JQuery
    一、简介目前最流行的JavaScript函数库之一,对JavaScript进行了封装。并不是一门新语言,而是将常用的、复杂的JavaScript操作进行函数化封装,封装后可以直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。扩展:目前jQuery有三个大版本1.x:兼容ie678,使......