无限自动滚动效果 +鼠标滚轮滚动效果

最新推荐文章于 2024-07-09 09:58:49 发布
最新推荐文章于 2024-07-09 09:58:49 发布
阅读量711 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45264424/article/details/115770623
版权

自动滑动vue版本

<template>

    <div class="revenueSort-content">
        <div class="revenueSort-scroll" id="revenueSortCon" @mouseover="mouseOverHandle" @mouseleave="mouseLeaveHandle">
            <div class="revenueSort-box">
                <div class="sort-item" v-for="(item,index) in revenueSortList" :key="index" >
                    <div class="sort-tit">
                        <span>{{item.qymc}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                revenueSortList: [],
                heightNum: "",
                top: 0,
                timeInit: "",
            };
        },
        created() {
        	// 获取数据
            this.getRevenueList()
        },

        methods: {
            //鼠标移入事件
            mouseOverHandle() {
                let top = this.top
                let heightNum = this.revenueSortList.length / 2
                let height = this.heightNum
                var boxHeight = document.querySelector("#revenueSortCon").offsetHeight

                let num = height * heightNum - boxHeight
                var minHeight = 0
                var maxHeight = 0
                if (num >= top) {
                    minHeight = 0
                    maxHeight = num
                } else {
                    minHeight = (this.revenueSortList.length / 2) * height
                    maxHeight = (this.revenueSortList.length) * height - boxHeight
                }
                document.getElementById("revenueSortCon").onmousewheel = (e) => {
                    if (e.wheelDeltaY < 0) {
                        this.top += 40;
                    } else {
                        this.top -= 40;
                    }
                    if (this.top < minHeight) {
                        this.top = minHeight;
                    }
                    if (this.top > maxHeight) {
                        this.top = maxHeight;
                    }
                    document.getElementById('revenueSortCon').scrollTop = this.top
                    return false;
                };
                this.stopTimeFun()
            },
            // 鼠标移出事件
            mouseLeaveHandle() {
                let top = document.getElementById('revenueSortCon').scrollTop
                let num = (this.revenueSortList.length / 2) * this.heightNum
                if (num < top) {
                    this.top = top - num
                }
                this.initTimeFun()
            },
            //开始滚动执行
            initTimeFun() {
                if (this.timeInit) {
                    this.stopTimeFun()
                }
                let heightNum = this.revenueSortList.length / 2
                let height = this.heightNum
                let num1 = height * heightNum
                this.timeInit = window.setInterval(() => {
                    if (this.top == num1) {
                        this.top = 0
                    }
                    this.top = this.top + 1
                    document.getElementById('revenueSortCon').scrollTop = this.top
                }, 40)
            },
            // 清楚定时器
            stopTimeFun() {
                let timeInit = this.timeInit
                window.clearInterval(timeInit);
            },
            //    获取营收数据
            getRevenueList() {
                this.$api.indexApi.getRevenueListSort(this.dataObj).then(({data} = res) => {
                    if (data.success) {
                        let list = data.result
                        this.stopTimeFun()
                        if (list.length > 0) {
                            document.getElementById('revenueSortCon').scrollTop = 0
                            this.top = 0
                            let firstNum = list[0].zysr
                            list.forEach((item, index) => {
                                let percent = parseFloat(((100 * item.zysr) / firstNum).toFixed(2))
                                item["percent"] = percent + "%"
                                item["index"] = index
                            })
                            this.revenueSortList = list
                            this.$nextTick(() => {
                                this.heightNum = document.querySelector(".sort-item").offsetHeight
                                let boxHeight = document.querySelector(".revenueSort-content").offsetHeight
                                if (this.heightNum * (list.length) > boxHeight) {
	                                //滚动插件 复制2分数据
	                                let list = [...this.revenueSortList]
	                                this.revenueSortList = this.revenueSortList.concat(list)
	                                setTimeout(() => {
	                                    this.initTimeFun()
	                                }, 1000)
	                            }
                            });
                        }else{
                            this.$message({
                                message: '暂无数据！',
                                type: 'warning'
                            });
                            this.revenueSortList = []
                        }
                    } else {
                        this.$message({
                            message: '暂无数据！',
                            type: 'warning'
                        });
                        this.revenueSortList = []
                    }

                })
            },
            
        },
        mounted() {
        },
        beforeDestroy() {
            this.stopTimeFun()
        }
    };
</script>
<style lang="scss">
    .revenueSort-content {
        height: 25vh;
        background: url("../../assets/imgs/index/model02.png") no-repeat top center;
        background-size: 100% 100%;
        margin-top: 0.4vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .model-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 12px 8px;
            cursor: pointer;

            i {
                color: #00f6ff;
                font-size: 22px;
                vertical-align: middle;
            }

            span {
                color: #00f6ff;
                font-size: 16px;
                vertical-align: middle;
                padding-left: 8px;
            }

            .unit {
                color: #b2b8ca;
            }
        }

        .sort-item {
            height: 42px !important;
            cursor: pointer;
        }


        .tempWrap {
            padding: 14px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .revenueSort-scroll {
            margin-bottom: 20px;
            flex: 1;
            overflow: scroll;
            position: relative;
            overflow-x: hidden;
            /*滚动条样式*/
            &::-webkit-scrollbar {
                width: 10px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 2px;
                /*background-color: red;*/
                background: rgba(255, 255, 255, 0.2);
            }
        }

        .revenueSort-box {
            padding: 10px;
            padding-top: 0;
            width: 100%;
            box-sizing: border-box;

            .sort-item {
                padding-bottom: 8px;

                .sort-tit {
                    display: flex;
                    align-items: center;
                    color: #fff;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    .img-box {
                        text-align: center;
                        color: red;
                        width: 30px;

                        .icon1 {
                            width: 25px;
                            height: 23px;
                            margin: 0 auto;
                            background: url("../../assets/imgs/index/icon1.png") no-repeat center center;
                        }

                        .icon2 {
                            margin: 0 auto;
                            width: 16px;
                            height: 23px;
                            background: url("../../assets/imgs/index/icon2.png") no-repeat center center;
                            background-size: 100% 100%;
                        }

                    }

                    span {
                        margin-left: 4px;
                        font-size: 14px;
                    }
                }

                .sort-bar {
                    display: flex;
                    align-items: center;
                    color: #f1c01d;
                    padding-top: 2px;

                    .bar {
                        max-width: 296px;
                        height: 10px;
                        margin-left: 2px;
                        background-image: linear-gradient(270deg,
                                #ded123 0%,
                                #f1c01d 100%);
                        border-radius: 7px;
                        margin-right: 8px;
                    }
                }
            }

        }


    }
</style>

鼠标不无限滚动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      li {
        list-style-type: none;
        background-color: rgba(0, 0, 0, 0.2);
        line-height: 40px;
        color: #000;
      }

      #map {
        background-color: pink;
        overflow: hidden;
        position: relative;
      }
      .li-box {
        position: relative;
        top: 0;
        left: 0;
        width: 100;
      }
    </style>
  </head>

  <body>

    <div id="map" style="width: 500px; height: 200px">
      <div class="li-box" id="scrollBox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </div>
    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      $("#map").hover(
        function () {
          // 移入
          var firstTop = $("#scrollBox").css("top"); //已经滚动的高度
          var i = 0;
          var minTop = 0; //允许的最小top
          var maxTop = oneHeight; //允许的最大top
          if (firstTop != "0px") {
            firstTop = parseFloat(firstTop);
            i = Math.floor(firstTop / height); //已经滚动上去了几个
            minTop = i * height;
            maxTop = oneHeight + -minTop;
          } else {
            firstTop = 0;
          }
          maxTop = maxTop - $("#map").height();
          document.querySelector("#map").onmousewheel = function (e) {
            if (e.wheelDeltaY < 0) {
              scrollTop -= 40;
            } else {
              scrollTop += 40;
            }
            if (scrollTop > minTop) {
              scrollTop = minTop;
            }
            if (scrollTop < -maxTop) {
              scrollTop = -maxTop;
            }
            $("#scrollBox").css("top", scrollTop);
          };
          stopTimeFun();
        },
        function () {
          // 移出
          var firstTop = $("#scrollBox").css("top"); //已经滚动的高度
            firstTop = parseFloat(firstTop).toString().slice(1);
            if (firstTop > oneHeight) {
              scrollTop = -(firstTop - oneHeight);
            }
          initTimeFun();
        }
      );
      //   复制两份数据
      var cloneDom = $("#map li").clone();
      $("#map .li-box").append(cloneDom);

      //开始滚动执行
      var timeInit = "",
        scrollTop = 0;
      var height = $("#map li").height(); //一行的高度
      var liLength = $("#map li").length; //克隆之后总个数，总行数
      var oneHeight = (liLength / 2) * height; //一份的高度
      initTimeFun();
      function initTimeFun() {
        if (timeInit) {
          stopTimeFun();
        }
        let heightNum = liLength / 2;
        let num1 = height * heightNum;
        timeInit = window.setInterval(() => {
          if (scrollTop == -num1) {
            scrollTop = 0;
          }
          scrollTop = scrollTop - 1;
          $("#scrollBox").css("top", scrollTop);
        }, 40);
      }
      // 清楚定时器
      function stopTimeFun() {
        window.clearInterval(timeInit);
      }
    </script>
  </body>
</html>

鼠标无限滚动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      li {
        list-style-type: none;
        background-color: rgba(0, 0, 0, 0.2);
        line-height: 40px;
        color: #000;
      }

      #map {
        background-color: pink;
        overflow: hidden;
        position: relative;
      }
      .li-box {
        position: relative;
        top: 0;
        left: 0;
        width: 100;
      }
    </style>
  </head>

  <body>

    <div id="map" style="width: 500px; height: 200px">
      <div class="li-box" id="scrollBox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </div>
    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      $("#map").hover(
        function () {
          // 移入
          document.querySelector("#map").onmousewheel = function (e) {
            if (e.wheelDeltaY < 0) {
              scrollTop -= 40;
            } else {
              scrollTop += 40;
            }
            if(scrollTop>0){
                scrollTop = -oneHeight;
            }
            if(scrollTop<-oneHeight){
                scrollTop=0
            }
            $("#scrollBox").css("top", scrollTop);
          };
          stopTimeFun();
        },
        function () {
          // 移出
          var firstTop = $("#scrollBox").css("top"); //已经滚动的高度
            firstTop = parseFloat(firstTop).toString().slice(1);
            if (firstTop > oneHeight) {
              scrollTop = -(firstTop - oneHeight);
            }
          initTimeFun();
        }
      );
      //   复制两份数据
      var cloneDom = $("#map li").clone();
      $("#map .li-box").append(cloneDom);

      //开始滚动执行
      var timeInit = "",
        scrollTop = 0;
      var height = $("#map li").height(); //一行的高度
      var liLength = $("#map li").length; //克隆之后总个数，总行数
      var oneHeight = (liLength / 2) * height; //一份的高度
      initTimeFun();
      function initTimeFun() {
        if (timeInit) {
          stopTimeFun();
        }
        let heightNum = liLength / 2;
        let num1 = height * heightNum;
        timeInit = window.setInterval(() => {
          if (scrollTop == -num1) {
            scrollTop = 0;
          }
          scrollTop = scrollTop - 1;
          $("#scrollBox").css("top", scrollTop);
        }, 40);
      }
      // 清楚定时器
      function stopTimeFun() {
        window.clearInterval(timeInit);
      }
    </script>
  </body>
</html>
前端老实人灬
关注
专栏目录
svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画
weixin_29818013的博客
06-04 744
之前用D3制作图表是初次接触SVG，当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候，才意识到SVG用于制作可交互的页面动画是多么有意思。于是自己也尝试在HTML页面中制作了一个鼠标滚轮控制的SVG线条动画，具体的效果是，随着滚轮的滑动，线条一点点出现，或者一点点隐藏。只需要几行JS代码旧可以实现。首先得有标签先得有一张SVG图。SVG图片中的形状有很多种，对应不同的标签...
css鼠标滚动触发动画
qq_33484858的博客
06-20 2137
CSS3 + JavaScript滚动动画库Scrollanim <body> <div class="container"> <div class="row"> <d...
鼠标滚轮滚动控制页面显示和页面动画
小白变怪兽
11-22 4610
滚滚屏 动画 鼠标滚动 页面显示
svg html 鼠标滚轮交互,SVG+CSS3随着位置旋转的鼠标交互动画
weixin_31667199的博客
06-04 247
JavaScript语言：JaveScriptBabelCoffeeScript确定// Because of a WebKit-Issue which renders (even SVG) cursors blurry on// Retina-Displays I decided to go for a solution which renders the cursor within a cus...
基于animate.css和原生JS实现的鼠标滚动动画效果.zip
07-11
实现效果： 基于animate.css和原生JS实现的鼠标滚动动画效果，挺不错的CSS3动画效果，基于CSS动画插件 animate.css实现，animate.css拥有众多的动画特效而且是开源的，大家到官网看看吧。
【vue2】实现自动轮播+滚轮控制
weixin_45291798的博客
07-03 1152
有一个`无缝轮播+滚轮控制`的需求，找了很多的方法发现都没办法完美的实现这种效果。 用原生的js实现不是无缝滚动 用无缝滚动插件实现，发现pc端无法实现滚轮控制
【Vue3】vue3-seamless-scroll实现无缝滚动+滚轮控制
最新发布
weixin_45291798的博客
07-09 843
前言 … 目标创建一个vue3项目，在项目中安装第三方组件 1 安装2 引入并注册 3 使用组件 在正式开始之前，先看一下这个第三方组件有哪些参数或者属性 官方文档：vue3-seamless-scroll 组件配置以上仅列出了接下来可能用到的属性。这里用的是表格组件。 若直接将el-table表格插入到vue-seamless-scroll组件中，会导致el-table表格中的表头也会进行滚动，这不是想要的效果。 这里用两个el-table，一个保留表头部分，一个保留内容部分。保留内容部分的放入vue-s
vue 实现滚动到底部翻页效果(pc端)
10-16
这种效果通常被称为“无限滚动”或“滚动加载”。以下是一个详细的实现步骤： 1. **HTML结构**： HTML部分用于展示列表数据，这里使用`v-for`循环遍历数据列表`list`。每个列表项包含一个状态图标（由`:class`绑定...
改进WPF鼠标滚轮处理
04-08
"改进WPF鼠标滚轮处理"这个主题聚焦于优化应用程序中的滚轮滚动功能，确保用户能够流畅、自然地浏览内容。在C# .NET环境中，VS2010和VS2013都是常用的开发工具，而WPF则提供了丰富的设计和架构功能，使得开发者可以...
UGUI实现ScrollView无限滚动
Tong1993222的博客
05-02 4148
       抽空做了一个UGUI的无限滚动的效果。只做了一半（向下无限滚动）。网上也看了很多教程，感觉还是按照自己的思路来写可能比较好。搭建如下：content节点不添加任何组件。布局组件默认是会重新排版子节点的，所以如果子节点的位置变化，会重新排版，不能达到效果。Size Fitter组件也不加，自己写代码调整Size大小（不调整大小，无法滑动）。       最主要的实现过程就是用Queue...
鼠标滚动事件动画特效代码
03-20
jQuery鼠标滚动事件动画是一款点击网站导航或者滑动鼠标之后网站，整个body开始沿着设定好的路径旋转，很酷的效果。
principle案例上下左右滚动效果.zip
05-08
小demo案例
【懒人神器】鼠标自动连续点击器免费下载
10-12
鼠标自动连续点击器可以实现全自动点击鼠标、您可以自己设置点击类型、频率、以及开启/关闭点击热键，合适用在需要大量点击鼠标的地方、解放您的双手！是工作娱乐的好帮手。
html鼠标滚动到某位置时,原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用...
weixin_39589241的博客
06-08 466
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用发布时间：2018-06-23 14:03,浏览次数：404, 标签：JScss废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢(此代码改版很方便，大家可以任意发挥)(注意：如果不想自己写动画的，可以引入Animate.css 相信这个动画库大家都不陌生)body{overfl...
基于css3的鼠标滑动按钮动画
weixin_33734785的博客
06-18 76
2019独角兽企业重金招聘Python工程师标准>>> ...
html5 鼠标动画效果,7 个让人惊叹的 HTML5 鼠标动画
weixin_39834984的博客
06-03 277
今天我们一起来分享一些有趣的HTML5鼠标动画，当我们移动鼠标时，页面上将会出现一些神奇的动画特效。当然这些动画可能在实际应用中并不太会使用到，但是对大家研究HTML5和CSS3的帮助应该会非常大。本文分享的7个HTML5鼠标动画都提供源代码下载，都是一些不错的资源。1、HTML5鲸鱼动画今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML...
vue自动滚动组件 可以支持鼠标滚轮操作
予歌的博客
08-01 1273
/如果列表数据是异步获取的，记得初始化在获取数据后再调用。//当判断滚动的高度大于等于盒子高度时，从头开始滚动。vue自动滚动组件可以支持鼠标滚轮操作。//获取需要滚动的盒子的高度。//鼠标移入停止滚动。//鼠标移出继续滚动。...............
vue前端简单实现无缝循环滚动自动播放，滚动条上下滚动，鼠标悬停，从鼠标滚动到哪里开始滚动超好用
weixin_66071584的博客
01-11 3916
vue前端简单实现无缝循环滚动自动播放，滚动条上下滚动，鼠标悬停，从鼠标滚动到哪里开始滚动
前端实现无限循环滚动三种方式（react hooks示例）：js || css || 插件
希望我快乐
05-07 9631
滚动数据根据需要改为图片或html元素，或者从接口读取数据组装元素 横向滚动，修改容器宽高，将 scrollTop 改为 scrollLeft 渲染数据变化时，或者在模态框作渲染等依据一些外在条件变化需要重新渲染时，必须清除所有定时器 封装组件使用，需考虑：依赖项，滚动方向，速率，每条数据渲染形式 import { useState, useEffect, useRef } from 'react' // 定时器 let intervalTimer, timeoutTimer const Index.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值