zoukankan      html  css  js  c++  java
  • 跑马灯(广播消息轮播组件)

    基于vue2的垂直跑马灯(广播消息轮播组件)

    npm install vue-marquee
    
    new Vue({
      el: 'body',
      data: function(){
      	return {
      		listData: ['item1', 'item2', 'item3']
      	}
      },
      components: {
        'vue-marquee': Marquee,
        'item': '你的列表item组件'
      },
      templete: `<vue-marquee :duration="600" :interval="2000">
                    <item v-for="i in listData" :content="i"></item>
                 </vue-marquee>`
    });
    

    传入参数

    Name Type Default Description
    interval Number 3000 上一次轮播完成到下一次轮播开始的间隔时间,ms
    duration Number 600 轮播过程耗时,ms
    direction String up 轮播方向,'up'

    文档原文:https://www.npmjs.com/package/vue-marquee

    注:用vue做出来的滚动时有点卡顿

    基于jq的跑马灯(广播消息轮播组件)

    1、引入文件
    <link rel="stylesheet" href="/css/liMarquee.css">
    <script src="/js/jquery-1.9.0.min.js"></script>
    <script src="/js/jquery.liMarquee.js"></script>
    
    2、HTML
    <div class="dowebok">jQuery无缝滚动插件liMarquee</div>
    
    3、JavaScript
    $(function(){
        $('.dowebok').liMarquee();
    });
    

    传入参数

    名称 类型 默认值 说明
    direction 字符串 left 滚动方向,可选 left / right / up / down
    loop 整数 -1 循环次数,-1 为无限循环
    scrolldelay 整数 0 每次重复之前的延迟
    scrollamount 整数 50 滚动速度,越大越快
    circular 布尔值 true 无缝滚动,如果为 false,则和 marquee 效果一样
    drag 布尔值 true 鼠标可拖动
    runshort 布尔值 true 内容不足是否滚动
    hoverstop 布尔值 true 鼠标悬停暂停
    xml 布尔值 false 加载 xml 文件
    inverthover 布尔值 false 反向,即默认不滚动,鼠标悬停滚动
    jjyy 兢兢业业 yyjj
  • 相关阅读:
    列表,字典,元组,集合内置方法
    数据类型内置方法(1)
    if判断与while、for循环语句
    与用户交互、格式化输出、基本运算符
    执行python程序的两种方式
    # 操作系统与编程语言分类
    drf框架2-序列化与反序列化
    drf框架1
    前端-vue路由传参、axios前后台交互、cookie设置
    前端-vue的配置和使用
  • 原文地址:https://www.cnblogs.com/ljyyjj/p/14504601.html
Copyright © 2011-2022 走看看