当前位置 : 主页 > 网页制作 > css >

文字无缝滚动效果,鼠标移入时暂停

来源:互联网 收集:自由互联 发布时间:2021-06-13
项目背景:基于vue的项目 昨天需要写一个效果,需要将数据自动轮播,然后鼠标移入时,轮播暂停。就像文字走马灯的效果类似。走马灯的效果可以使用css实现。 这里说一下我用的插

    项目背景:基于vue的项目

    昨天需要写一个效果,需要将数据自动轮播,然后鼠标移入时,轮播暂停。就像文字走马灯的效果类似。走马灯的效果可以使用css实现。

    这里说一下我用的插件vue-seamless-scroll 这个插件将文字无缝滚动,单行停顿滚动都封装了一下,同时,这个插件同样可用在图片轮播的效果。还是很方便的。

    示例代码地址:https://github.com/dreamITGirl/VueProgect/tree/master/project-demo/src/components/RidingLatern

     

    具体效果如上图所示

    vue-seamless-scroll文字无缝滚动的使用方法

 

    1.项目引入   

yarn add vue-seamless-scroll --save
npm i vue-seamless-scroll --save

      2.在vue文件中引入方式

      ①全局引入     

import scroll from ‘vue-seamless-scroll‘
Vue.use(scroll)

      ②局部引入(大型项目的话,建议使用这种方式)

      建议如果需求比较复杂,建议下载下来组件源码,放在组件中,这样后面可以修改源码,增加自己的需求,对组件再做二次封装

    3.vue-seamless-scroll参数介绍

     ①:data="数组变量" 

                    注:在<li>中需要用标签包住要显示的数据,如果<li>标签中没有子标签,整个的ul是不往上滚动的

      同时如果seamless-wrap这个类名如果没有定义高度,整个的列表滚动时会看到ul重置回到原始位置的过程

 

<template>
    <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>
<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
<script>
    export default {
        data () {
            return {
                listData: [{
                   title: 无缝滚动第一行无缝滚动第一行,
                   date: 2017-12-16
                 }, {
                    title: 无缝滚动第二行无缝滚动第二行,
                    date: 2017-12-16
                 }]
                }
            }
       }
  }
</script>

      ② 设置速度、鼠标悬停效果、单行停顿、单行停顿时间需要设置在computed中。通过属性class-option设置

        

<vue-seamless-scroll :class-option="optionSetting"></vue-seamless-scroll>

computed:{       optionSetting(){         
return { step:1,//速度,值越大,速度越快 hoverStop:false,//鼠标悬停效果,false为关闭该效果           singleHeight: 26,//单行停顿           waitTime: 2500,//单行停顿的时间         }       } }

    vue-seamless-scroll的主要用途可用在图片轮播,环形进度条,横向进度条的功能

网友评论